<template>
  <view class="container">
    <block v-if="isload">
      <block v-if="sysset.showgzts">
        <view style="width: 100%; height: 88rpx"> </view>
        <view class="follow_topbar">
          <view class="headimg">
            <image :src="sysset.logo" />
          </view>
          <view class="info">
            <view class="i"
              >欢迎进入
              <text :style="{ color: t('color1') }">{{ sysset.name }}</text>
            </view>
            <view class="i">关注公众号享更多专属服务</view>
          </view>
          <view
            class="sub"
            @tap="showsubqrcode"
            :style="{ 'background-color': t('color1') }"
            >立即关注</view
          >
        </view>
        <uni-popup id="qrcodeDialog" ref="qrcodeDialog" type="dialog">
          <view class="qrcodebox">
            <image
              :src="sysset.qrcode"
              @tap="previewImage"
              :data-url="sysset.qrcode"
              class="img"
            />
            <view class="txt">长按识别二维码关注</view>
            <view class="close" @tap="closesubqrcode">
              <image
                src="/static/img/close2.png"
                style="width: 100%; height: 100%"
              />
            </view>
          </view>
        </uni-popup>
      </block>

      <view
        class="toptabbar_tab"
        v-if="showtoptabbar == 1 && toptabbar_show == 1"
      >
        <view
          class="item"
          :class="toptabbar_index == 0 ? 'on' : ''"
          :style="{ color: toptabbar_index == 0 ? t('color1') : '#333' }"
          @tap="changetoptab"
          data-index="0"
        >
          商品<view class="after" :style="{ background: t('color1') }"></view>
        </view>
        <view
          class="item"
          :class="toptabbar_index == 1 ? 'on' : ''"
          :style="{ color: toptabbar_index == 1 ? t('color1') : '#333' }"
          @tap="changetoptab"
          data-index="1"
        >
          评价<view class="after" :style="{ background: t('color1') }"></view>
        </view>
        <view
          class="item"
          :class="toptabbar_index == 2 ? 'on' : ''"
          :style="{ color: toptabbar_index == 2 ? t('color1') : '#333' }"
          @tap="changetoptab"
          data-index="2"
        >
          详情<view class="after" :style="{ background: t('color1') }"></view>
        </view>
        <view
          class="item"
          v-if="tjdatalist.length > 0"
          :class="toptabbar_index == 3 ? 'on' : ''"
          :style="{ color: toptabbar_index == 3 ? t('color1') : '#333' }"
          @tap="changetoptab"
          data-index="3"
        >
          推荐<view class="after" :style="{ background: t('color1') }"></view>
        </view>
      </view>

      <scroll-view
        class="scvclass"
        ref="scv"
        @scroll="scroll"
        :scrollIntoView="scrollToViewId"
        :scrollTop="scrollTop"
        :scroll-y="true"
        style="height: 100%; overflow: scroll"
        @scrolltolower="scrolltoBottom"
      >
        <view id="scroll_view_tab0">
          <view class="swiper-container" v-if="isplay == 0">
            <swiper
              class="swiper"
              :indicator-dots="false"
              :autoplay="true"
              :interval="5000"
              @change="swiperChange"
            >
              <block v-for="(item, index) in product.pics" :key="index">
                <swiper-item class="swiper-item">
                  <view class="swiper-item-view">
                    <image
                      class="img"
                      :src="item"
                      mode="widthFix"
                      @tap="previewImage"
                      :data-url="item"
                      :data-urls="product.pics.join(',')"
                    />
                  </view>
                </swiper-item>
              </block>
            </swiper>
            <view
              class="imageCount"
              v-if="product.diypics"
              @tap="goto"
              :data-url="'/pagesExt/shop/diylight?id=' + product.id"
              style="bottom: 92rpx; width: 140rpx"
            >
              自助试灯</view
            >
            <view class="imageCount"
              >{{ current + 1 }}/{{ product.pics.length }}</view
            >
            <view v-if="product.video" class="provideo" @tap="payvideo">
              <image src="/static/img/video.png" />
              <view class="txt">{{ product.video_duration }}</view>
            </view>
            <view
              style="
                position: absolute;
                top: 10vh;
                left: 20rpx;
                z-index: 9;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 20rpx;
                color: #fff;
                padding: 0 10rpx;
              "
              v-if="purchaseHistory.length > 0"
            >
              <swiper
                style="position: relative; height: 54rpx; width: 350rpx"
                :autoplay="true"
                :interval="5000"
                :vertical="true"
              >
                <swiper-item
                  v-for="(item, index) in purchaseHistory"
                  :key="index"
                  class="flex-y-center"
                >
                  <image
                    :src="item.member_headimg"
                    style="
                      width: 40rpx;
                      height: 40rpx;
                      border: 1px solid rgba(255, 255, 255, 0.4);
                      border-radius: 50%;
                      margin-right: 4px;
                    "
                  />
                  <view
                    style="
                      width: 300rpx;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      font-size: 22rpx;
                    "
                  >
                    {{ item.member_nickname }}
                    {{ formatTime(item.createtime) }}购买了该商品
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
          <view class="videobox" v-if="isplay == 1">
            <video
              autoplay="true"
              class="video"
              id="video"
              :src="product.video"
            ></video>
            <view class="parsevideo" @tap="parsevideo">退出播放</view>
          </view>
          <view
            class="cuxiaopoint cuxiaoitem"
            v-if="showtoptabbar == 1 && couponlist.length > 0"
            style="background: #fff; padding: 0 16rpx"
          >
            <view class="f1" @tap="showcuxiaodetail">
              <view
                v-for="(item, index) in couponlist"
                :key="index"
                class="t"
                :style="{
                  background: 'rgba(' + t('color1rgb') + ',0.1)',
                  color: t('color1'),
                }"
                ><text class="t0" style="padding: 0 6px">券</text
                ><text class="t1">{{ item.name }}</text>
              </view>
            </view>
            <view class="f2" @tap="showcuxiaodetail">
              <image src="/static/img/arrow-point.png" mode="widthFix" />
            </view>
          </view>
          <view
            style="
              background: #fff;
              width: 100%;
              height: auto;
              padding: 20rpx 20rpx 0;
            "
            v-if="shopset.detail_guangao1"
          >
            <image
              :src="shopset.detail_guangao1"
              style="width: 100%; height: auto"
              mode="widthFix"
              v-if="shopset.detail_guangao1"
              @tap="showgg1Dialog"
            />
          </view>
          <uni-popup
            id="gg1Dialog"
            ref="gg1Dialog"
            type="dialog"
            v-if="shopset.detail_guangao1 && shopset.detail_guangao1_t"
          >
            <image
              :src="shopset.detail_guangao1_t"
              @tap="previewImage"
              :data-url="shopset.detail_guangao1_t"
              class="img"
              mode="widthFix"
              style="width: 600rpx; height: auto; border-radius: 10rpx"
            />
            <view class="ggdiaplog_close" @tap="closegg1Dialog">
              <image
                src="/static/img/close2.png"
                style="width: 100%; height: 100%"
              />
            </view>
          </uni-popup>

          <!-- 团购 -->
          <view class="seckill_title" v-if="ptype == 'groupby'">
            <image :src="static_url + '/static/img/tghd.png'" class="f0" />
            <view class="f1">
              <view class="t1">
                <block v-if="showprice_dollar && product.usd_sellprice">
                  <text style="font-size: 24rpx">$</text
                  >{{ product.usd_sellprice }}
                  <text style="margin-left: 6rpx; font-size: 36rpx"
                    ><text style="font-size: 24rpx">￥</text
                    >{{ product.min_price }}</text
                  >
                </block>
                <block v-else>
                  <text style="font-size: 24rpx">￥</text
                  >{{ product.min_price }}
                </block>
                <text class="x2">￥{{ product.market_price }}</text>
              </view>
              <view class="t2" v-if="groupby_status == 0">团购未开始</view>
              <view class="t2" v-if="groupby_status == 1">火爆团购中</view>
              <view class="t2" v-if="groupby_status == 2">团购已结束</view>
            </view>
            <view class="f4">
              <view class="t1"
                >距团购{{ groupby_status == 0 ? "开始" : "结束" }}还剩</view
              >
              <view class="t2" id="djstime"
                ><text class="djsspan">{{ djshour }}</text> :
                <text class="djsspan">{{ djsmin }}</text> :
                <text class="djsspan">{{ djssec }}</text>
              </view>
            </view>
          </view>

          <!-- 秒杀 -->
          <view class="seckill_title" v-if="ptype == 'seckill'">
            <!-- <image :src="static_url + '/static/img/tjms.png'" class="f0" /> -->
            <view class="f1">
              <view class="t1">
                <text style="font-size: 30rpx">￥</text>
                <text class="x2">{{ product.market_price }}</text>
                <block v-if="showprice_dollar && product.usd_sellprice">
                  <text class="x22">${{ product.usd_sellprice }}</text>
                  <text class="x22">￥{{ product.sell_price }}</text>
                </block>
                <block v-else>
                  <text class="x22">{{ product.sell_price }}</text>
                </block>
              </view>
              <text
                class="x222"
                v-if="
                  seckill_status != 2 &&
                  produce_youhuidata &&
                  produce_youhuidata.unit_price > 0
                "
                >活动最低到手￥{{ produce_youhuidata.unit_price }}</text
              >
              <view class="t2" v-if="seckill_status == 0">秒杀未开始</view>
              <view class="t2" v-if="seckill_status == 1">火爆抢购中</view>
              <view class="t2" v-if="seckill_status == 2">秒杀已结束</view>
            </view>
            <view class="f3" v-if="seckill_status == 0 || seckill_status == 1">
              <view class="f3-fw">{{ ex ? ex : "" }}</view>
              <view class="f3-text"
                >已抢购
                <image
                  class="f3-icon"
                  src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250311/0857e8cb118bd0abad70d27eb4c91787.png"
                  alt=""
                />{{ product.sales }}件
              </view>
              <!-- <view class="f3-text">距秒杀{{ seckill_status == 0 ? '开始' : '结束' }}还剩</view> -->
              <view class="t2" id="djstime">
                <view class="f3-text"
                  >距{{ seckill_status == 0 ? "开始" : "结束" }}还剩</view
                >
                <text class="djsspan">{{ djshour }}</text> :
                <text class="djsspan">{{ djsmin }}</text> :
                <text class="djsspan">{{ djssec }}</text>
              </view>
            </view>
          </view>

          <view class="header">
            <block v-if="product.price_type != 1 || product.min_price > 0">
              <view
                v-if="sysset.price_show_type == '0' || !sysset.price_show_type"
              >
                <view class="price_share" v-if="ptype == 'shop'">
                  <view class="price">
                    <view class="f1 flex-s" :style="{ color: t('font_color') }">
                      <block
                        v-if="showprice_dollar && product.usdmin_price != 0"
                      >
                        <text style="margin-right: 20rpx"
                          ><text style="font-size: 36rpx">$</text
                          >{{ product.usdmin_price
                          }}<text
                            v-if="product.usdmax_price != product.usdmin_price"
                            >-{{ product.usdmax_price }}</text
                          ></text
                        >
                        <text style="font-size: 40rpx"
                          ><text style="font-size: 32rpx">￥</text
                          >{{ product.min_price
                          }}<text v-if="product.max_price != product.min_price"
                            >-{{ product.max_price }}</text
                          ></text
                        >
                      </block>
                      <block v-else>
                        <text style="font-size: 36rpx">￥</text
                        >{{ product.min_price
                        }}<text v-if="product.max_price != product.min_price"
                          >-{{ product.max_price }}</text
                        >
                      </block>
                      <block v-if="show_money_price">
                        <view
                          class="moneyprice"
                          :style="
                            'color:' +
                            t('color1') +
                            ';background:rgba(' +
                            t('color1rgb') +
                            ',0.2)'
                          "
                        >
                          {{ t("余额") }}
                        </view>
                      </block>
                    </view>
                    <view
                      class="f2"
                      v-if="product.market_price * 1 > product.sell_price * 1"
                    >
                      ￥{{ product.market_price
                      }}<text v-if="product.max_price != product.min_price"
                        >起</text
                      ></view
                    >

                    <view class="f11">
                      <view class="f11-item" v-if="shopset.hide_sales != 1">
                        销量：{{ product.sales }}
                      </view>
                      <view class="item" @tap="addfavorite">
                        <image
                          class="img sc-img"
                          :src="
                            isfavorite
                              ? static_url + '/static/img/shoucanged.png'
                              : static_url + '/static/img/shoucang.png'
                          "
                        />
                        <view class="t1 sc-text">{{
                          isfavorite ? "已收藏" : "收藏"
                        }}</view>
                      </view>
                    </view>
                  </view>
                  <!--<view class="share" @tap="shareClick">
										<image class="img" src="/static/img/share.png" /><text class="txt">分享</text>
									</view> -->
                </view>
              </view>

              <view
                v-if="
                  sysset.price_show_type == '2' || sysset.price_show_type == '1'
                "
              >
                <view v-if="product.is_vip == '1'">
                  <view class="flex" v-if="product.lvprice == '1'">
                    <view
                      class="member flex"
                      :style="'border-color:' + t('color1')"
                    >
                      <view
                        :style="{ background: t('color1') }"
                        class="member_lable flex-y-center"
                      >
                        {{ product.level_name }}
                      </view>
                      <view
                        :style="'color:' + t('color1')"
                        class="member_value"
                      >
                        <text
                          :style="
                            product.lvprice == '1'
                              ? 'font-size:36rpx'
                              : 'font-size:26rpx'
                          "
                          >￥</text
                        >
                        <text
                          :style="
                            product.lvprice == '1'
                              ? 'font-size:50rpx'
                              : 'font-size:26rpx'
                          "
                          >{{ product.sell_price }}</text
                        >
                      </view>
                    </view>
                  </view>
                  <view class="price_share" style="height: auto">
                    <view class="price">
                      <view class="f1 flex-s" :style="{ color: t('color1') }">
                        <block v-if="showprice_dollar && usdmin_price">
                          <text style="margin-right: 20rpx"
                            ><text
                              style="font-size: 30rpx"
                              v-if="product.usdmin_price"
                              >$</text
                            >{{ product.usdmin_price
                            }}<text
                              v-if="
                                product.usdmax_price != product.usdmin_price
                              "
                              >-{{ product.usdmax_price }}</text
                            ></text
                          >
                          <text style="font-size: 44rpx"
                            ><text style="font-size: 22rpx">￥</text
                            >{{ product.min_price
                            }}<text
                              v-if="product.max_price != product.min_price"
                              >-{{ product.max_price }}</text
                            ></text
                          >
                        </block>
                        <block v-else>
                          <text>
                            <text
                              :style="
                                product.lvprice == '1'
                                  ? 'font-size:26rpx'
                                  : 'font-size:36rpx'
                              "
                              >￥</text
                            >
                            <text
                              :style="
                                product.lvprice == '1'
                                  ? 'font-size:26rpx'
                                  : 'font-size:50rpx'
                              "
                              >{{ product.min_price }}</text
                            >
                          </text>
                        </block>
                        <block v-if="show_money_price">
                          <view
                            class="moneyprice"
                            :style="
                              'color:' +
                              t('color1') +
                              ';background:rgba(' +
                              t('color1rgb') +
                              ',0.2)'
                            "
                          >
                            {{ t("余额") }}
                          </view>
                        </block>
                      </view>
                      <!-- <view class="f2" v-if="product.market_price*1 > product.sell_price*1">￥{{product.market_price}}<text v-if="product.max_price!=product.min_price">起</text></view> -->
                    </view>
                    <view class="share" @tap="shareClick">
                      <image class="img" src="/static/img/share.png" /><text
                        class="txt"
                        >分享</text
                      >
                    </view>
                  </view>
                </view>
                <view v-if="product.is_vip == '0'">
                  <view class="price_share">
                    <view class="price">
                      <view class="f1 flex-s" :style="{ color: t('color1') }">
                        <block v-if="showprice_dollar">
                          <text style="margin-right: 20rpx"
                            ><text style="font-size: 36rpx">$</text
                            >{{ product.usdmin_price
                            }}<text
                              v-if="
                                product.usdmax_price != product.usdmin_price
                              "
                              >-{{ product.usdmax_price }}</text
                            ></text
                          >
                          <text
                            ><text style="font-size: 32rpx">￥</text
                            ><text style="font-size: 40rpx">{{
                              product.min_price
                            }}</text
                            ><text v-if="product.max_price != product.min_price"
                              >-{{ product.max_price }}</text
                            ></text
                          >
                        </block>
                        <block v-else>
                          <text>
                            <text style="font-size: 36rpx">￥</text>
                            <text style="font-size: 50rpx">{{
                              product.min_price
                            }}</text>
                          </text>
                        </block>
                        <block v-if="show_money_price">
                          <view
                            class="moneyprice"
                            :style="
                              'color:' +
                              t('color1') +
                              ';background:rgba(' +
                              t('color1rgb') +
                              ',0.2)'
                            "
                          >
                            {{ t("余额") }}
                          </view>
                        </block>
                      </view>
                      <view
                        class="f2"
                        v-if="product.market_price * 1 > product.sell_price * 1"
                      >
                        ￥{{ product.market_price
                        }}<text v-if="product.max_price != product.min_price"
                          >起</text
                        ></view
                      >
                    </view>
                    <view class="share" @tap="shareClick">
                      <image class="img" src="/static/img/share.png" /><text
                        class="txt"
                        >分享</text
                      >
                    </view>
                  </view>
                  <view
                    class="flex"
                    v-if="sysset.price_show_type == '2' && product.lvprice == 1"
                  >
                    <view
                      class="member flex"
                      :style="'border-color:' + t('color1')"
                    >
                      <view
                        :style="{ background: t('color1') }"
                        class="member_lable flex-y-center"
                      >
                        {{ product.level_name }}
                      </view>
                      <view
                        :style="'color:' + t('color1')"
                        class="member_value"
                      >
                        <text style="font-size: 26rpx">￥</text>
                        <text style="font-size: 26rpx">{{
                          product.vip_price
                        }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>

              <view class="points" v-if="product.points">
                最高返{{ product.points }}积分
              </view>

              <view
                class="card"
                :style="{ background: t('color2') }"
                v-if="firstCoupon"
              >
                <view class="card-left">
                  <view
                    class="card-left-top"
                    v-if="firstCoupon.type == 41"
                    :style="{
                      background: `linear-gradient(to right, ${t(
                        'color2'
                      )}, ${t('color1')})`,
                    }"
                  >
                    新人券
                  </view>
                  <text class="card-left-money">￥</text>
                  <text>{{ firstCoupon.money }}</text>
                </view>
                <view class="card-item">
                  <view class="card-right">
                    <view class="card-time">
                      {{ firstCoupon.name }}
                    </view>
                    <view class="card-time">
                      {{
                        calculateRemainingTime(
                          firstCoupon.starttime,
                          firstCoupon.endtime
                        )
                      }}
                    </view>
                  </view>
                  <view class="card-btn" :style="{ background: t('color1') }">
                    <view
                      v-if="firstCoupon.haveget == 0"
                      @tap="handClaim(firstCoupon)"
                      >领取</view
                    >
                    <view v-else @tap="buydialogChange" data-btntype="2"
                      >去使用</view
                    >
                  </view>
                </view>
              </view>

              <view
                class="coupon-item"
                :style="{ color: t('color1') }"
                @tap="getCoupons"
                v-if="coupon_new_list.length > 0"
              >
                <view class="coupon-item-l">
                  <view
                    class="coupon-item-box"
                    :style="{ border: `2rpx solid ${t('color2')}` }"
                    v-for="(item, index) in coupon_new_list.slice(0, 2)"
                    :key="index"
                  >
                    <view class="coupon-left" v-if="item.type == 1">
                      商品券
                    </view>
                    <view class="coupon-left" v-if="item.type == 41">
                      新人券
                    </view>
                    <view class="coupon-left" v-if="item.type == 10">
                      折扣券
                    </view>
                    <view class="coupon-left" v-if="item.type == 2">
                      礼品券
                    </view>
                    <view class="coupon-left" v-if="item.type == 2">
                      计次券
                    </view>
                    <view class="coupon-left" v-if="item.type == 4">
                      运费抵扣券
                    </view>
                    <view class="coupon-right">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
                <view
                  class="coupon-button"
                  :style="{ background: t('color1') }"
                >
                  领券
                  <view class="arr-right" :style="{ color: t('color1') }">
                    >
                  </view>
                </view>
              </view>

              <view
                class="title-tags-main"
                v-if="product.tags && product.tags.length > 0"
              >
                <text class="title-tags" v-for="item in product.tags">{{
                  item
                }}</text>
              </view>

              <view class="title">
                {{ product.name }}
              </view>
            </block>
            <block v-else>
              <view v-if="product.xunjia_text" class="price_share">
                <view class="price">
                  <view class="f1" :style="{ color: t('color1') }">
                    <text style="font-size: 36rpx">询价</text>
                  </view>
                </view>
              </view>
              <view class="price_share">
                <view class="title">{{ product.name }}</view>
                <view class="share" @tap="shareClick">
                  <image class="img" src="/static/img/share.png" /><text
                    class="txt"
                    >分享</text
                  >
                </view>
              </view>
            </block>

            <view class="sellpoint" v-if="product.sellpoint">{{
              product.sellpoint
            }}</view>

            <view
              class="sales_stock"
              v-if="shopset.hide_sales != 1 && shopset.hide_stock != 1"
            >
              <view
                class="f1"
                style="visibility: hidden"
                v-if="shopset.hide_sales != 1"
                >销量：{{ product.sales }}
              </view>
              <view class="f2" v-if="shopset.hide_stock != 1"
                >库存：{{ product.stock }}</view
              >
            </view>

            <view class="sales_stock" v-if="ptype == 'groupby'">
              <view class="f1">已参团：{{ product.buynum }}人次</view>
              <view class="f2">库存：{{ product.stock }}</view>
            </view>

            <view
              class="commission"
              :style="{
                background: 'rgba(' + t('color1rgb') + ',0.1)',
                color: t('color1'),
              }"
              v-if="product.isrefund == 1"
            >
              注：该商品不允许退款
            </view>

            <view
              class="commission"
              :style="{
                background: 'rgba(' + t('color1rgb') + ',0.1)',
                color: t('color1'),
              }"
              v-if="
                shopset.showcommission == 1 &&
                product.commission > 0 &&
                showjiesheng == 0
              "
            >
              分享好友购买预计可得{{ t("佣金") }}：<text
                style="font-weight: bold; padding: 0 2px"
                >{{ product.commission }}</text
              >{{ product.commission_desc }}
            </view>
            <view
              style="margin: 20rpx 0; color: #333; font-size: 22rpx"
              v-if="product.balance_price > 0"
            >
              首付款金额：{{ product.advance_price }}元，尾款金额：{{
                product.balance_price
              }}元</view
            >
            <view
              style="margin: 20rpx 0; color: #666; font-size: 22rpx"
              v-if="product.buyselect_commission > 0"
            >
              下单被选奖励预计可得{{ t("佣金") }}：<text
                style="font-weight: bold; padding: 0 2px"
                >{{ product.buyselect_commission }}</text
              >元
            </view>

            <view
              class="upsavemoney"
              :style="{
                background:
                  'linear-gradient(90deg, rgb(255, 180, 153) 0%, #ffcaa8 100%)',
                color: '#653a2b',
              }"
              v-if="product.upsavemoney > 0"
            >
              <view class="flex1"
                >升级到 {{ product.nextlevelname }} 预计可节省<text
                  style="font-weight: bold; padding: 0 2px; color: #ca4312"
                  >{{ product.upsavemoney }}</text
                >元
              </view>
              <view
                style="
                  margin-left: 20rpx;
                  font-weight: bold;
                  display: flex;
                  align-items: center;
                  color: #ca4312;
                "
                @tap="goto"
                data-url="/pagesExt/my/levelup"
                >立即升级
                <image
                  src="/static/img/arrowright2.png"
                  style="width: 30rpx; height: 30rpx"
                />
              </view>
            </view>
            <view class="bottom-list" v-if="product.ranktxt" @click="toSales">
              <view class="bottom-list-left">
                <image
                  class="bottom-list-icon"
                  src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250409/d2dbfe9d52d6e738888700bdadafeb42.png"
                  mode=""
                ></image>
                <text class="bottom-list-text">{{ product.ranktxt }}</text>
              </view>
              <image
                class="bottom-list-icon"
                src="/static/img/arrowright.png"
                mode=""
              ></image>
            </view>
          </view>

          <!-- 团购价格 -->
          <view class="tg_pricedata" v-if="ptype == 'groupby'">
            <view class="tg_pricetitle">团购价格</view>
            <view
              class="tg_price flex"
              v-for="(item, index) in product.pricedata"
              :key="index"
            >
              <view class="t1">满{{ item.num }}人次</view>
              <block v-if="showprice_dollar && item.usd_money">
                <view
                  class="t2 flex1"
                  style="color: #e94745; margin-left: 10rpx"
                >
                  <text style="font-size: 24rpx">$</text>{{ item.usd_money }}
                  {{ item.money }}元
                </view>
              </block>
              <block v-else>
                <view class="t2 flex1">{{ item.money }}元</view>
              </block>
              <view class="t3"
                ><text style="color: #f50" v-if="product.buynum >= item.num"
                  >已达成</text
                ><text style="color: #333" v-else
                  >还差{{ item.num - product.buynum }}人次</text
                ></view
              >
            </view>
            <view style="padding: 5px 0; font-size: 22rpx; color: red">
              注：付款金额并非实际花费金额，活动结束后所有参与人均按照已达成的最低价格计算，多付的金额将全部退还
            </view>
          </view>

          <!-- 规格 -->
          <view
            class="gg-choose"
            @tap="buydialogChange"
            data-btntype="2"
            v-if="ptype != 'groupby'"
          >
            <view class="f0">规格</view>
            <view class="f1 flex1">
              <block v-if="product.price_type == 1">查看规格</block>
              <block v-else>
                <view v-if="productDetail.length > 0">
                  <view
                    v-if="productDetail[0].items.length > 0"
                    class="pdetail-box"
                  >
                    <!-- 显示前3个规格 -->
                    <view
                      v-for="(item, index) in productDetail[0].items.slice(
                        0,
                        3
                      )"
                      :key="index"
                      class="pdetail"
                    >
                      {{ item.title }}
                      <text
                        v-if="
                          index < productDetail[0].items.length - 1 && index < 2
                        "
                        >,
                      </text>
                    </view>
                    <block>
                      等共{{ productDetail[0].items.length }}个规格
                    </block>
                  </view>
                  <view v-else> 请选择商品规格及数量 </view>
                </view>
                <view v-else> 请选择商品规格及数量 </view>
              </block>
            </view>
            <image class="f2" src="/static/img/arrowright.png" />
          </view>

          <!-- 配送 -->
          <view class="" v-if="mid">
            <view
              class="choose"
              @tap="goto"
              :data-url="
                '/pages/address/' +
                (member_address && member_address.id
                  ? 'address'
                  : 'addressadd') +
                '?fromPage=buy&type=' +
                (havetongcheng == 1 ? '1' : '0')
              "
            >
              <view class="f0">配送</view>

              <view class="juli-box">
                <image
                  class="juli"
                  :src="static_url + '/static/img/juli.png'"
                  mode=""
                ></image>
                <view class="address-box">
                  {{
                    member_address &&
                    member_address.area &&
                    member_address.address
                      ? member_address.area + member_address.address
                      : "请先设置配送地址"
                  }}
                </view>
              </view>
              <image class="f2" src="/static/img/arrowright.png" />
            </view>
            <view class="mid-box">
              <text v-if="product.default_presale_status == 0">现货</text>
              <text v-if="product.default_presale_status == 1">预售</text>
              <text
                class="mid-box-text"
                v-if="product.default_presale_status == 0"
                >{{
                  product.estimated_shipping_time
                    ? product.estimated_shipping_time
                    : 24
                }}小时内发货</text
              >
              <text
                class="mid-box-text"
                v-if="product.default_presale_status == 1"
                >预售时间{{
                  product.presale_time ? product.presale_time : 24
                }}</text
              >
            </view>
          </view>

          <!-- 保障 -->
          <view class="choose" @tap="open">
            <view class="f0">购物保障</view>
            <view class="f1 flex1">
              <block>
                <view>
                  <view>
                    <text
                      :style="{ color: t('color1') }"
                      style="margin-right: 4rpx"
                      >安心购</text
                    >
                    <block>品质严保·极速退款</block>
                  </view>
                </view>
              </block>
            </view>
            <image class="f2" src="/static/img/arrowright.png" />
          </view>

          <view
            class="choose"
            @click="goto"
            :data-url="`/pagesExt/my/operate?id=${product.id}`"
            v-if="
              product.certificate_images &&
              product.certificate_images.length > 0
            "
          >
            <view class="f0">证照</view>
            <view class="f1 flex1">
              <block>
                <view>
                  <view style="display: flex; align-items: center">
                    <image
                      class="zz-icon"
                      :src="static_url + '/static/img/certificate_icon.png'"
                      mode=""
                    ></image>
                    <block>经营资质</block>
                  </view>
                </view>
              </block>
            </view>
            <image class="f2" src="/static/img/arrowright.png" />
          </view>

          <!-- 积分 -->
          <view class="cuxiaodiv" v-if="product.givescore > 0">
            <view class="cuxiaopoint">
              <view class="f0">送{{ t("积分") }}</view>
              <view
                class="f1"
                :style="{ color: t('color1') }"
                style="font-size: 26rpx"
              >
                购买可得{{ product.givescore }}积分
              </view>
            </view>
          </view>

          <!-- 检测 -->
          <view
            class="jiance"
            v-if="shopset.is_show_detection == 1 && reportList.length > 0"
          >
            <view class="jc-title">
              <image
                class="jc-1"
                src="/pagesSocial/static/img/test.png"
              ></image>
              <view class="jc-2">{{ app_name }}检测</view>
              <view class="jc-3">·{{ reportList.length }}份报告</view>
            </view>
            <view class="fixed-header">
              <!-- 提示文本 -->
              <view class="tip-header">
                <text class="tip-text"
                  >本检测报告基于平台随机抽样盲检，检测结果仅与该送检产品有关。检测报告仅作为平台内部质量控制之用。</text
                >
              </view>

              <!-- 标签切换栏 -->
              <view class="tab-list">
                <scroll-view
                  scroll-x="true"
                  class="tab-scroll"
                  show-scrollbar="false"
                >
                  <view class="tab-items">
                    <view
                      v-for="(tab, index) in reportList"
                      :key="index"
                      :class="['tab-item', activeTab === index ? 'active' : '']"
                      @click="switchTab(index)"
                    >
                      <view class="tab-c">
                        <view class="info-c">
                          <image
                            src="/pagesSocial/static/img/auth.png"
                            class="info-icon"
                          >
                          </image>
                          <view class="info-badge">
                            <text>{{ app_name }}检测</text>
                            <text class="test-count">第{{ tab.time }}次</text>
                          </view>
                        </view>
                        <text class="tab-date">{{ tab.detection_date }}</text>
                      </view>

                      <view class="tab-content">
                        <text class="new-tag" v-if="tab.isNew">新</text>
                        <text class="tab-text">{{ tab.title }}</text>
                      </view>
                      <image
                        :src="static_url + '/static/img/jiance.png'"
                        class="stamp-image"
                      >
                      </image>
                    </view>
                  </view>
                </scroll-view>
              </view>
            </view>
          </view>

          <!-- 溯源 -->
          <view
            class="source"
            v-if="shopset.is_show_album == 1 && Source.name"
            @tap="toSource"
          >
            <view class="sr-title">
              <image
                class="sr-1"
                src="/pagesSocial/static/img/chang.png"
              ></image>
              <view class="sr-2">{{ app_name }}溯源</view>
            </view>
            <view class="sr-content">
              <view class="image-container">
                <image
                  :src="Source.banner"
                  mode="aspectFill"
                  class="album-image"
                ></image>
                <view class="album-content">
                  <view class="flex-s">
                    <view>
                      <view class="album-title">{{ Source.name }}</view>
                      <view class="flex-box">
                        <text class="album-desc">{{ Source.local }}</text>
                        <text class="album-desc" style="margin: 0 10rpx"
                          >|</text
                        >
                        <text class="album-desc">{{
                          Source.date_describe
                        }}</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="sr-bottom"
                  >{{ Source.mark }} {{ Source.title }}</view
                >
              </view>
            </view>
          </view>

          <!-- <view class="cuxiaodiv" v-if="0 && couponlist.length > 0 || product.discount_tips != ''">
						<view class="cuxiaopoint cuxiaoitem" v-if="product.discount_tips != ''">
							<view class="f0">折扣</view>
							<view class="f1" style="padding-left:10rpx">{{ product.discount_tips }}</view>
							<view class="f2" @tap="goto" data-url="/pagesExt/my/levelinfo">
								<image src="/static/img/arrow-point.png" mode="widthFix" />
							</view>
						</view>
						<view class="cuxiaopoint cuxiaoitem" v-if="couponlist.length > 0 && showtoptabbar == 0">
							<view class="f0">优惠</view>
							<view class="f1" @tap="showcuxiaodetail">
								<view v-for="(item, index) in couponlist" :key="index" class="t"
									:style="{ background: 'rgba(' + t('color1rgb') + ',0.1)', color: t('color1') }">
									<text class="t0" style="padding:0 6px">券</text><text class="t1">{{ item.name
									}}</text>
								</view>
							</view>
							<view class="f2" @tap="showcuxiaodetail">
								<image src="/static/img/arrow-point.png" mode="widthFix" />
							</view>
						</view>
					</view> -->

          <view class="buy-box" v-if="purchaseHistory.length > 0">
            <view class="buy-box-title">
              <view class="buy-box-title-left"> 购买记录 </view>
              <view class="buy-box-title-right" @tap="jlmore">
                <view class=""> 查看更多 </view>
                <image class="f2" src="/static/img/arrowright.png" />
              </view>
            </view>
            <view class="roll-box" v-if="purchaseHistory.length > 0">
              <swiper
                style="position: relative; height: 120rpx; width: 100%"
                :autoplay="true"
                :interval="5000"
                :vertical="true"
                :display-multiple-items="2"
              >
                <swiper-item
                  v-for="(item, index) in purchaseHistory"
                  :key="index"
                  class="flex-box-center"
                  style="height: 60rpx; line-height: 60rpx"
                >
                  <view class="flex-left-box">
                    <image :src="item.member_headimg" class="flex-box-img" />
                    <view>
                      {{ item.member_nickname }}
                    </view>
                  </view>
                  <view class="jl-text">
                    {{ item.ggname }}*{{ item.num }}
                  </view>
                  <view>
                    {{ formatTime(item.createtime) }}
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>

          <view v-if="showcuxiaodialog" class="popup__container">
            <view class="popup__overlay" @tap.stop="hidecuxiaodetail"></view>
            <view class="popup__modal">
              <view class="popup__title">
                <text class="popup__title-text">优惠促销</text>
                <image
                  src="/static/img/close.png"
                  class="popup__close"
                  style="width: 36rpx; height: 36rpx"
                  @tap.stop="hidecuxiaodetail"
                />
              </view>
              <view class="popup__content">
                <view
                  v-for="(item, index) in cuxiaolist"
                  :key="index"
                  class="service-item"
                >
                  <view class="suffix">
                    <view class="type-name"
                      ><text
                        style="
                          border-radius: 4px;
                          border: 1px solid #f05423;
                          color: #ff550f;
                          font-size: 20rpx;
                          padding: 2px 5px;
                        "
                        >{{ item.tip }}</text
                      >
                      <text style="color: #333; margin-left: 20rpx">{{
                        item.name
                      }}</text>
                    </view>
                  </view>
                </view>
                <couponlist
                  :couponlist="couponlist"
                  @getcoupon="getcoupon"
                ></couponlist>
              </view>
            </view>
          </view>

          <view
            style="width: 100%; height: auto; padding: 20rpx 0 0"
            v-if="shopset.detail_guangao2"
          >
            <image
              :src="shopset.detail_guangao2"
              style="width: 100%; height: auto"
              mode="widthFix"
              v-if="shopset.detail_guangao2"
              @tap="showgg2Dialog"
            />
          </view>
          <uni-popup
            id="gg2Dialog"
            ref="gg2Dialog"
            type="dialog"
            v-if="shopset.detail_guangao2 && shopset.detail_guangao2_t"
          >
            <image
              :src="shopset.detail_guangao2_t"
              @tap="previewImage"
              :data-url="shopset.detail_guangao2_t"
              class="img"
              mode="widthFix"
              style="width: 600rpx; height: auto; border-radius: 10rpx"
            />
            <view class="ggdiaplog_close" @tap="closegg2Dialog">
              <image
                src="/static/img/close2.png"
                style="width: 100%; height: 100%"
              />
            </view>
          </uni-popup>
        </view>

        <!-- 评价 -->
        <view id="scroll_view_tab1">
          <view
            class="commentbox"
            v-if="shopset.comment == 1 && commentcount > 0"
          >
            <view class="title">
              <view class="f1">用户评价({{ commentcount }})</view>
              <view
                class="f2"
                @tap="goto"
                :data-url="'/pagesExt/shop/commentlist?proid=' + proId"
                >满意度
                <text :style="{ color: t('color1') }"
                  >{{ product.comment_haopercent }}%</text
                >
                <image
                  style="width: 32rpx; height: 32rpx"
                  src="/static/img/arrowright.png"
                />
              </view>
            </view>
            <view class="amazing-top">
              <view class="amazing-flex">
                <view class="amazing-box">
                  <view class="amazing-text"> {{ product.amazing }}% </view>

                  <view class="amazing" @tap="opentips">
                    惊艳度<image
                      class="amazing-icon"
                      src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250312/c80892b6b707874609d0a81a8f33eede.png"
                      mode=""
                    ></image>
                  </view>
                  <view v-if="showTips" class="tip-box">
                    <view class="tip-content">
                      惊艳度指购买用户对商品品质5分评估占比值
                    </view>
                  </view>
                </view>
                <view class="vertical-line"></view>
                <view class="amazing-main">
                  <image
                    class="main-img"
                    v-for="(item2, index2) in 5"
                    :key="index2"
                    :src="getStarImage(index2, statistics.comment_score)"
                    mode="widthFix"
                  />
                </view>
              </view>
              <!-- <view class="trend-box">
								<image class="trend" :src="static_url + '/static/img/location/trend.png'"></image>
								趋势
							</view> -->
            </view>
            <view class="tags-box">
              <view
                class="tags-box-item"
                v-for="(item, index) in tag_sums"
                :key="index"
                :style="{ background: t('color2') }"
              >
                {{ item.name }}({{ item.sum }})
              </view>
            </view>
            <view class="comment">
              <view class="item" v-if="commentlist.length > 0">
                <view class="f1">
                  <image class="t1" :src="commentlist[0].headimg" />
                  <view class="t2">{{ commentlist[0].nickname }}</view>
                  <view class="flex1"></view>
                  <view class="t3">
                    <image
                      class="img"
                      v-for="(item2, index2) in [0, 1, 2, 3, 4]"
                      :key="index2"
                      :src="
                        '/static/img/star' +
                        (commentlist[0].score > item2 ? '2' : '') +
                        '.png'
                      "
                    />
                  </view>
                </view>
                <view class="f2">
                  <text class="t1">{{ commentlist[0].content }}</text>
                  <view class="t2">
                    <block v-if="commentlist[0].content_pic != ''">
                      <block
                        v-for="(itemp, index) in commentlist[0].content_pic"
                        :key="index"
                      >
                        <view
                          @tap="previewImage"
                          :data-url="itemp"
                          :data-urls="commentlist[0].content_pic"
                        >
                          <image :src="itemp" mode="widthFix" />
                        </view>
                      </block>
                    </block>
                  </view>
                </view>
                <view
                  class="f3"
                  @tap="goto"
                  :data-url="'/pagesExt/shop/commentlist?proid=' + proId"
                  >查看全部评价</view
                >
              </view>
              <view v-else class="nocomment">暂无评价~</view>
            </view>
          </view>
        </view>

        <view id="scroll_view_tab2">
          <view class="shop" v-if="shopset.showjd == 1">
            <image :src="business.logo" class="p1" />
            <view class="p2 flex1">
              <view class="t1">{{ business.name }}</view>
              <view class="t2">{{ business.desc || "" }}</view>
            </view>
            <button
              class="p4"
              :style="{ background: '' + t('color1') + '' }"
              @tap="goto"
              :data-url="
                product.bid == 0
                  ? '/pages/index/index'
                  : '/pagesExt/business/detail?id=' + product.bid
              "
              data-opentype="reLaunch"
            >
              进入店铺
            </button>
          </view>
          <!-- 自提商品附近门店S -->
          <view
            v-if="showNearbyMendian && mendianids.length > 0"
            class="nearby-mendian-box"
          >
            <view class="nearby-mendian-title">
              <view class="t1"
                >附近门店<text v-if="mendianids.length > 1"
                  >（{{ mendianids.length }}家）</text
                >
              </view>
              <view
                class="t2"
                @tap="goto"
                :data-url="
                  '/pagesExt/business/mendian?bid=' +
                  product.bid +
                  '&proid=' +
                  product.id
                "
              >
                <text>{{ mendianids.length > 1 ? "全部" : "查看" }}门店</text>
                <image src="../../static/img/arrowright.png"></image>
              </view>
            </view>
            <view class="nearby-mendian-info">
              <view
                class="b1"
                @tap="goto"
                :data-url="'/pages/shop/mendian?id=' + mendian.id"
              >
                <image :src="mendian.pic"></image>
              </view>
              <view class="b2">
                <view
                  class="t1"
                  @tap="goto"
                  :data-url="'/pages/shop/mendian?id=' + mendian.id"
                >
                  {{ mendian.name }}
                </view>
                <view class="t2 flex-y-center">
                  <block v-if="mendian.distance">
                    <view
                      :style="{
                        background: 'rgba(' + t('color1rgb') + ',0.1)',
                        color: t('color1'),
                      }"
                      class="nearby-tag"
                      >最近</view
                    >
                    <view class="mendian-distance"
                      >{{ mendian.distance }}
                    </view>
                  </block>
                  <view class="mendian-address"
                    >{{ mendian.address ? mendian.address : mendian.area }}
                  </view>
                </view>
              </view>
              <view class="b3">
                <view @tap="callMendian" :data-tel="mendian.tel">
                  <image
                    :src="static_url + '/static/img/location/tel.png'"
                  ></image>
                </view>
                <view
                  @tap="toMendian"
                  :data-address="mendian.address"
                  :data-longitude="mendian.longitude"
                  :data-latitude="mendian.latitude"
                >
                  <image
                    :src="static_url + '/static/img/location/daohang.png'"
                  ></image>
                </view>
              </view>
            </view>
          </view>
          <!-- 自提商品附近门店E -->

          <block v-if="!isEmpty(product.paramdata)">
            <view class="detail_title">
              <view class="t1"></view>
              <view class="t2"></view>
              <view class="t0">商品参数</view>
              <view class="t2"></view>
              <view class="t1"></view>
            </view>
            <view
              style="background: #fff; padding: 20rpx 40rpx"
              class="paraminfo"
            >
              <view
                v-for="(item, index) in product.paramdata"
                class="paramitem"
              >
                <view class="f1">{{ index }}</view>
                <view class="f2">{{ item }}</view>
              </view>
            </view>
          </block>

          <view class="detail_title">
            <view class="t1"></view>
            <view class="t2"></view>
            <view class="t0">商品描述</view>
            <view class="t2"></view>
            <view class="t1"></view>
          </view>
          <view class="isloding" v-if="isLoding"> 图片加载中... </view>
          <view class="detail" v-else>
            <dp :pagecontent="pagecontent"></dp>
          </view>
        </view>

        <view class="waterfall-container" v-if="likelist.length > 0">
          <view class="like">
            <image
              class="like-icon"
              src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250407/1086317011f641d4dd9fc9a67b24ca9e.png"
              mode=""
            ></image>
            <text>你可能还喜欢</text>
          </view>
          <view class="waterfall-list">
            <!-- 左侧列 -->
            <view class="waterfall-column">
              <view
                class="waterfall-item"
                v-for="(item, index) in leftColumnList"
                :key="'left-' + index"
                :data-url="'/pages/shop/product?id=' + item.id"
                @click.stop="goto"
              >
                <image
                  class="shop-image"
                  :src="item.pic"
                  mode="widthFix"
                ></image>
                <view class="shop-text">
                  <view class="shop-text-left">
                    <view class="shop-text-name">{{ item.name }}</view>
                    <view class="shop-text-price">
                      <view>￥{{ item.sell_price }}</view>
                      <view class="shop-text-sales">销量:{{ item.sales }}</view>
                    </view>
                  </view>
                  <!-- <view >
										<image class="shop-add"
											src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250402/09cf0a1a6c7c2efd061d325e7722f543.png"
											mode=""></image>
									</view> -->
                </view>
              </view>
            </view>

            <!-- 右侧列 -->
            <view class="waterfall-column">
              <view
                class="waterfall-item"
                v-for="(item, index) in rightColumnList"
                :key="'right-' + index"
                :data-url="'/pages/shop/product?id=' + item.id"
                @click="goto"
              >
                <image
                  class="shop-image"
                  :src="item.pic"
                  mode="widthFix"
                ></image>
                <view class="shop-text">
                  <view class="shop-text-left">
                    <view class="shop-text-name">{{ item.name }}</view>
                    <view class="shop-text-price">
                      <view>￥{{ item.sell_price }}</view>
                      <view class="shop-text-sales">销量:{{ item.sales }}</view>
                    </view>
                  </view>
                  <!-- <view>
										<image class="shop-add"
											src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250402/09cf0a1a6c7c2efd061d325e7722f543.png"
											mode=""></image>
									</view> -->
                </view>
              </view>
            </view>
          </view>
          <!-- 加载更多提示 -->
          <view v-if="isLoading" class="loading-text">加载中...</view>
          <view v-if="!hasMore" class="no-more-text">没有更多了~</view>
          <view class="load-more-trigger" style="height: 1px"></view>
        </view>

        <!-- <view id="scroll_view_tab3">
          <view v-if="tjdatalist.length > 0">
            <view class="xihuan">
              <view class="xihuan-line"></view>
              <view class="xihuan-text">
                <image src="/static/img/xihuan.png" class="img" />
                <text class="txt">为您推荐</text>
              </view>
              <view class="xihuan-line"></view>
            </view>
            <view class="prolist">
              <dp-product-item
                :data="tjdatalist"
                @addcart="addcart"
                :menuindex="menuindex"
              ></dp-product-item>
            </view>
          </view>
        </view> -->

        <view style="width: 100%; height: 140rpx"></view>
      </scroll-view>

      <view
        class="bottombar flex-row"
        :class="menuindex > -1 ? 'tabbarbot' : 'notabbarbot'"
        v-if="product.status == 1 && !showcuxiaodialog"
      >
        <view class="f1">
          <button class="item" @click="goto" data-url="/pages/index/index">
            <image class="img logo-img" :src="logo" />
            <view class="t1">首页</view>
          </button>

          <button class="item" @click="openkefu" v-if="showOnlineKefu">
            <image class="img" src="/static/img/kefu.png" />
            <view class="t1">客服</view>
          </button>
          <button class="item" open-type="contact" v-else>
            <image class="img" src="/static/img/kefu.png" />
            <view class="t1">客服</view>
          </button>

          <!-- <view class="item flex1" @tap="goto" data-url="/pages/shop/cart">
						<image class="img" src="/static/img/gwc.png" />
						<view class="t1">购物车</view>
						<view class="cartnum" v-if="cartnum > 0"
							:style="{ background: 'rgba(' + t('color1rgb') + ',0.8)' }">
							{{ cartnum }}
						</view>
					</view> -->
          <view
            class="btn-item"
            @tap="buydialogChange"
            data-btntype="3"
            v-if="is_gift == 1"
          >
            <image
              class="btn-item-img"
              src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250308/fbaf6b6d4eb6b2a0881f76172e0bcabd.png"
            />
            <view class="btn-item-text">送礼</view>
          </view>
        </view>
        <view class="op2" v-if="showjiesheng == 1">
          <view
            class="tocart2"
            :style="{ background: t('color2') }"
            @tap="shareClick"
            ><text>分享赚钱</text
            ><text style="font-size: 24rpx"
              >赚￥{{ product.commission }}</text
            ></view
          >
          <block v-if="!product.buybtn_link_url">
            <view
              class="tobuy2"
              :style="{ background: t('color2') }"
              @tap="buydialogChange"
              data-btntype="2"
            >
              <text>{{
                product.buybtn_name ? product.buybtn_name : "立即购买"
              }}</text>
              <text style="font-size: 24rpx" v-if="product.jiesheng_money > 0"
                >省￥{{ product.jiesheng_money }}</text
              >
            </view>
          </block>
          <block v-else>
            <view
              class="tobuy2"
              :style="{ background: t('color2') }"
              @tap="goto"
              :data-url="product.buybtn_link_url"
            >
              <text>{{
                product.buybtn_name ? product.buybtn_name : "立即购买"
              }}</text>
              <text style="font-size: 24rpx" v-if="product.jiesheng_money > 0"
                >省￥{{ product.jiesheng_money }}</text
              >
            </view>
          </block>
        </view>
        <view class="op" v-else>
          <block>
            <view
              class="tocart flex-x-center flex-y-center"
              @tap="buydialogChange"
              data-btntype="1"
              v-if="
                ptype == 'shop' &&
                product.freighttype != 3 &&
                product.freighttype != 4
              "
              >加入购物车</view
            >
            <block>
              <block v-if="groupby_status == 2 || seckill_status == 2">
                <view
                  class="tobuy flex-x-center flex-y-center"
                  :style="{ background: '#9d9d9e' }"
                >
                  已结束
                </view>
              </block>
              <block v-else>
                <block v-if="!product.buybtn_link_url">
                  <block
                    v-if="produce_youhuidata && produce_youhuidata.unit_price"
                  >
                    <view
                      class="youhuibtn"
                      
                      @tap="buydialogChange($event, true)"
                      data-btntype="2"
                    >
                      <view class="youhuibtn-text-left">
                        {{
                          product.buybtn_name ? product.buybtn_name : "领券购买"
                        }}
                      </view>
                      <view class="youhuibtn-text"
                        >券后￥{{ produce_youhuidata.unit_price }}元起</view
                      >
                    </view>
                  </block>
                  <block v-else>
                    <view
                      class="tobuy flex-x-center flex-y-center"
                      
                      @tap="buydialogChange"
                      data-btntype="2"
                    >
                      {{
                        product.buybtn_name ? product.buybtn_name : "立即购买"
                      }}
                    </view>
                  </block>
                </block>
                <block v-else>
                  <view
                    class="tobuy flex-x-center flex-y-center"
                   
                    @tap="goto"
                    :data-url="product.buybtn_link_url"
                  >
                    {{ product.buybtn_name ? product.buybtn_name : "立即购买" }}
                  </view>
                </block>
              </block>
            </block>
          </block>
        </view>
      </view>

      <view v-if="getshow" class="popup__container">
        <view class="popup__overlay" @tap.stop="getclose"></view>
        <view class="popup__modal">
          <view class="popup__title__coupon">
            <view class="popup__title__coupon__text">优惠</view>
            <view class="popup__title__coupon__right">
              <button
                class="popup__title__coupon__right__btn"
                @tap="setShareType('coupon')"
                open-type="share"
              >
                邀请好友领券
              </button>
              <image
                src="/static/img/close.png"
                class="popup__title__coupon__close"
                style="width: 36rpx; height: 36rpx"
                @tap.stop="getclose"
              />
            </view>
          </view>
          <view class="popup__modal__content">
            <block v-if="coupon_list_data.is_youhui_status == 1">
              <view class="popup__modal__content__text">
                购买{{ youhuidata.num }}件，享受以下优惠
              </view>
              <view class="price-calc-wrapper">
                <view class="price-calc">
                  <view
                    class="final-price"
                    :style="{
                      background: `linear-gradient(to right, ${t(
                        'color2'
                      )}, ${t('color1')})`,
                    }"
                  >
                    <view class="">
                      <text class="symbol">¥</text>
                      <text class="amount">{{ youhuidata.unit_price }}</text>
                    </view>
                    <view class="">
                      <text class="unit">单件到手</text>
                    </view>
                  </view>
                  <view class="calc-formula">
                    <text class="equal">=</text>
                    <text class="bracket">(</text>
                    <view class="formula-item">
                      <text class="value">¥{{ youhuidata.sell_price }}</text>
                      <text class="label">购买{{ youhuidata.num }}件</text>
                      <text class="label">当前售价</text>
                    </view>
                    <text class="minus">-</text>
                    <view class="formula-item">
                      <text class="value">¥{{ youhuidata.money }}</text>
                      <text
                        class="label label-t"
                        :style="{ background: t('color2') }"
                        >{{ youhuidata.name }}</text
                      >
                    </view>
                    <text class="bracket">)</text>
                    <text class="divide">÷</text>
                    <text class="number">{{ youhuidata.num }}</text>
                  </view>
                </view>
              </view>
            </block>
            <scroll-view class="popup-lq" scroll-y="true">
              <view
                class="card"
                :style="{ background: t('color2') }"
                v-for="(item, index) in coupon_list"
                :key="index"
              >
                <view class="card-left">
                  <view
                    class="card-left-top"
                    v-if="item.type == 41"
                    :style="{
                      background: `linear-gradient(to right, ${t(
                        'color2'
                      )}, ${t('color1')})`,
                    }"
                  >
                    新人券
                  </view>
                  <text class="card-left-money">￥</text>
                  <text>{{ item.money }}</text>
                </view>
                <view class="card-item">
                  <view class="card-right">
                    <view class="card-time">
                      {{ item.name }}
                    </view>
                    <view class="card-right-text">
                      <image
                        class="card-right-img"
                        :src="product.pics[0]"
                        mode=""
                      ></image>
                      <text
                        class="product-title"
                        v-if="
                          item.producttitle != null &&
                          item.producttitle !== undefined
                        "
                      >
                        {{ item.producttitle }}
                      </text>
                    </view>
                    <view class="card-time" v-if="item.has_record == 0">
                      {{ calculateRemainingTime(item.starttime, item.endtime) }}
                    </view>
                    <view class="card-time" v-if="item.has_record == 1">
                      {{
                        calculateRemainingTime(
                          item.yxqstarttime,
                          item.yxqendtime
                        )
                      }}
                    </view>
                  </view>
                  <view class="card-btn-box">
                    <view
                      class="card-btn card-btn-item"
                      :style="{ background: t('color1') }"
                    >
                      <view
                        v-if="item.has_record == 0"
                        @click="handleClaim(item, index)"
                      >
                        领取</view
                      >
                      <view v-else @tap="buydialogChange" data-btntype="2"
                        >去使用
                      </view>
                    </view>
                    <view class="card-btn-text">
                      已发放{{ item.has_record_count }}张
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>

      <view v-if="jlshow" class="popup__container">
        <view class="popup__overlay" @tap.stop="jlclose"></view>
        <view class="popup__modal">
          <view class="popup__title popup__title__jl">
            <text class="popup__title-text">购买记录</text>
            <image
              src="/static/img/close.png"
              class="popup__close"
              style="width: 36rpx; height: 36rpx"
              @tap.stop="jlclose"
            />
          </view>
          <scroll-view
            class="popup-jl"
            scroll-y="true"
            @scrolltolower="loadMoreJl"
            :lower-threshold="50"
            :style="{ height: scrollViewHeight + 'px' }"
          >
            <view
              v-for="(item, index) in purchaseHistory"
              :key="index"
              class="service-item-jl"
            >
              <view class="flex-left-box">
                <image :src="item.member_headimg" class="flex-box-img" />
                <view>{{ item.member_nickname }}</view>
              </view>
              <view class="jl-text"> {{ item.ggname }}*{{ item.num }} </view>
              <view>{{ formatTime(item.createtime) }}</view>
            </view>
            <view v-if="loading" class="loading">加载中...</view>
            <view v-if="noMore" class="no-more">没有更多数据了</view>
          </scroll-view>
        </view>
      </view>

      <view v-if="fwshow" class="popup__container">
        <view class="popup__overlay" @tap.stop="hidefuwudetail"></view>
        <view class="popup__modal">
          <view class="popup__title">
            <text class="popup__title-text">服务</text>
            <image
              src="/static/img/close.png"
              class="popup__close"
              style="width: 36rpx; height: 36rpx"
              @tap.stop="hidefuwudetail"
            />
          </view>
          <view class="popup__content">
            <view
              v-for="(item, index) in guaranteeList.longitudinal"
              :key="index"
              class="service-item"
            >
              <view class="fuwudialog-content">
                <view class="pop-flex">
                  <image class="pop-icon" :src="item.icon" mode=""></image>
                  <view class="f1">
                    {{ item.name }}
                  </view>
                </view>
                <text class="f2">{{ item.describe }}</text>
              </view>
            </view>
            <button
              class="pop-btn"
              :style="{ background: t('color2') }"
              @tap.stop="hidefuwudetail"
            >
              确定
            </button>
          </view>
        </view>
      </view>

      <buydialog
        v-if="buydialogShow"
        :proid="product.id"
        :btntype="btntype"
        @buydialogChange="buydialogChange"
        @showLinkChange="showLinkChange"
        :menuindex="menuindex"
        @addcart="addcart"
        :controller="getController"
        :canbuy="getbuyStatus"
      ></buydialog>

      <!-- <view class="scrolltop" v-show="scrolltopshow" @tap="changetoptab" data-index="0">
				<image class="image" src="/static/img/gotop.png" />
			</view> -->

      <view v-if="sharetypevisible" class="popup__container">
        <view class="popup__overlay" @tap.stop="handleClickMask"></view>
        <view class="popup__modal" style="height: 320rpx; min-height: 320rpx">
          <!-- <view class="popup__title">
					<text class="popup__title-text">请选择分享方式</text>
					<image src="/static/img/close.png" class="popup__close" style="width:36rpx;height:36rpx" @tap.stop="hidePstimeDialog"/>
				</view> -->
          <view class="popup__content">
            <view class="sharetypecontent">
              <view class="f1" @tap="shareapp" v-if="getplatform() == 'app'">
                <image class="img" src="/static/img/weixin.png" />
                <text class="t1">分享给好友</text>
              </view>
              <view class="f1" @tap="sharemp" v-else-if="getplatform() == 'mp'">
                <image class="img" src="/static/img/weixin.png" />
                <text class="t1">分享给好友</text>
              </view>
              <view class="f1" @tap="sharemp" v-else-if="getplatform() == 'h5'">
                <image class="img" src="/static/img/weixin.png" />
                <text class="t1">分享给好友</text>
              </view>
              <button class="f1" open-type="share" v-else>
                <image class="img" src="/static/img/weixin.png" />
                <text class="t1">分享给好友</text>
              </button>
              <view class="f2" @tap="showPoster">
                <image
                  class="img"
                  :src="static_url + '/static/img/sharepic.png'"
                />
                <text class="t1">生成分享图片</text>
              </view>

              <view
                class="f1"
                @tap="shareScheme"
                v-if="getplatform() == 'wx' && xcx_scheme"
              >
                <image class="img" src="/static/img/weixin.png" />
                <text class="t1">小程序链接</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="posterDialog" v-if="showposter">
        <view class="main">
          <view class="close" @tap="posterDialogClose">
            <image class="img" src="/static/img/close.png" />
          </view>
          <view class="content">
            <image
              class="img"
              :src="posterpic"
              mode="widthFix"
              @tap="previewImage"
              :data-url="posterpic"
            >
            </image>
          </view>
        </view>
      </view>

      <view class="posterDialog schemeDialog" v-if="showScheme">
        <view class="main">
          <view class="close" @tap="schemeDialogClose">
            <image class="img" src="/static/img/close.png" />
          </view>
          <view class="schemecon">
            <view style="line-height: 60rpx">{{ product.name }} </view>
            <view
              >购买链接：<text style="color: #00a0e9">{{
                schemeurl
              }}</text></view
            >
            <view
              class="copybtn"
              :style="{ background: '' + t('color1') + '' }"
              @tap.stop="copy"
              :data-text="product.name + '购买链接：' + schemeurl"
            >
              一键复制
            </view>
          </view>
        </view>
      </view>

      <view class="posterDialog linkDialog" v-if="showLinkStatus">
        <view class="main">
          <view class="close" @tap="showLinkChange">
            <image class="img" src="/static/img/close.png" />
          </view>
          <view class="content">
            <view class="title">{{ sysset.name }}</view>
            <view class="row" v-if="product.bid > 0">
              <view style="width: 20%" class="f1">店铺名称</view>
              <view
                class="f2 flex-y-center flex-x-bottom"
                style="width: 80%; font-size: 28rpx"
                @tap="goto"
                :data-url="'/pagesExt/business/index?id=' + product.bid"
              >
                <view
                  class="flex1"
                  style="
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ business.name }}
                </view>
                <image src="/static/img/arrowright.png" class="image" />
              </view>
            </view>
            <view class="row" v-if="business.tel">
              <view class="f1">联系电话</view>
              <view
                class="f2 flex-y-center flex-x-bottom"
                @tap="goto"
                :data-url="'tel::' + business.tel"
                :style="{ color: t('color1') }"
                >{{ business.tel }}
                <image
                  :src="static_url + '/static/img/copy.png'"
                  class="copyicon"
                  @tap.stop="copy"
                  :data-text="business.tel"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>

    <view class="scrolltop-box">
      <view class="scrolltop-box-item" @tap="shareClick1">
        <image class="img" src="/static/img/share.png" />
      </view>
      <view class="scrolltop-box-item" @tap="goto" data-url="/pages/shop/cart">
        <image
          class="img gwc-img"
          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250312/06a38360f955195d68fd66142f6940e0.png"
        />
        <view
          class="cartnum"
          v-if="cartnum > 0"
          :style="{ background: 'rgba(' + t('color1rgb') + ',0.8)' }"
        >
          {{ cartnum }}
        </view>
      </view>

      <view class="scrolltop-box-item" v-if="scrolltopshow" @tap="scrollToTop">
        <image
          class="img"
          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250308/7c1cce16799e556a5b8bd4ff1ad0bb58.png"
        />
      </view>
    </view>

    <small-window :topPx="150" :rightPx="10" :canDocking="false">
      <!-- :src="liveinfo.banner" -->
      <view class="liveWindows" v-if="showlivewindows">
        <image
          @tap="goToLive"
          class="live-cover"
          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250508/493bc562a438d311673b0d7c776b5951.jpg"
          mode="aspectFill"
        ></image>

        <image
          @tap="goToLive"
          class="liveicon1"
          :src="pre_url + '/static/images/zb-live.gif'"
        ></image>

        <view class="close">
          <image
            src="/static/img/close2.png"
            style="width: 60%; height: 60%"
            @tap="showlivewindows = false"
          />
        </view>

        <view v-if="0">
          <view class="live-main" @tap="goToLive">
            <view class="live-info">
              <image
                class="live-icon"
                src="@/pagesSocial/static/img/album.png"
                mode="aspectFit"
              ></image>
              <text class="live-title">直播中</text>
            </view>
            <image
              class="liveicon"
              src="/static/img/play.png"
              mode="aspectFit"
            ></image>
            <view class="live-btn">点击查看</view>
          </view>
        </view>
      </view>
    </small-window>

    <uni-popup ref="popup" type="bottom" border-radius="20rpx">
      <view class="pop_kefu">
        <view class="pop_kefulist" v-if="kefuList.length > 0">
          <view
            v-for="(item, index) in kefuList"
            :key="index"
            @click="tokefu(item)"
            class="pop_list_item"
          >
            <image class="pic" :src="item.headimg" mode="aspectFill"></image>
            <view class="name">{{ item.nickname }}</view>
          </view>
        </view>
        <view class="load_kefu" v-else>
          <uni-load-more status="loading" iconSize="28"></uni-load-more>
        </view>
      </view>
    </uni-popup>
    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();
var interval = null;

export default {
  data() {
    return {
      app_name: app.globalData.initdata.name,
      isLoding: true,
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      mid: app.globalData.mid,
      logo: app.globalData.initdata.logo,
      textset: {},
      isload: false,
      buydialogShow: false,
      btntype: 1,
      isfavorite: false,
      current: 0,
      isplay: 0,
      showcuxiaodialog: false,
      showfuwudialog: false,
      business: "",
      product: [],
      cartnum: "",
      commentlist: "",
      commentcount: "",
      couponlist: "",
      fuwulist: [],
      pagecontent: "",
      shopset: {},
      sysset: {},
      title: "",
      bboglist: "",
      sharepic: "",
      sharetypevisible: false,
      showposter: false,
      posterpic: "",
      scrolltopshow: false,
      kfurl: "",
      showLinkStatus: false,
      showjiesheng: 0,
      tjdatalist: [],
      showtoptabbar: 0,
      toptabbar_show: 0,
      toptabbar_index: 0,
      scrollToViewId: "",
      scrollTop: 0,
      scrolltab0Height: 0,
      scrolltab1Height: 0,
      scrolltab2Height: 0,
      scrolltab3Height: 0,
      xcx_scheme: false,
      showScheme: false,
      schemeurl: "",
      showprice_dollar: false,
      show_money_price: false,
      //自提商品门店显示
      showNearbyMendian: false,
      longitude: "",
      latitude: "",
      mendianids: [],
      mendian: {},
      mendian_id: 0,
      //自提商品门店显示
      productDetail: [],
      is_gift: "",
      guaranteeList: [],
      showScrollToTop: false,
      purchaseHistory: [],
      fwshow: false,
      jlshow: false,
      currentPage: 1,
      loading: false,
      noMore: false,
      scrollViewHeight: 0,
      showTips: false,
      tag_sums: [],
      statistics: {},
      member_address: {},
      havetongcheng: 0,
      getshow: false,
      isClaimed: false,
      shareType: "",
      coupon_list: [],
      coupon_list_data: {},
      coupon_new_list: [],
      youhuidata: {},
      firstCoupon: null,
      produce_youhuidata: {},
      ptype: "", //商品类型
      ex: "", //额外参数
      proId: "", //商品本体id
      seckill_status: 1,
      groupby_status: 1,
      nowtime: 0,
      seckill_duration: 0,
      seckill_starttime: 0,
      seckill_endtime: 0,
      djshour: "00",
      djsmin: "00",
      djssec: "00",
      reportList: [], //检测报告
      activeTab: 0,
      Source: {},
      viewTimer: null, // 访问计时器
      hasRecorded: false, // 是否已记录访问
      activeStart: 0, // 开始停留时间戳
      isPageActive: false, // 页面是否活跃
      kefuList: [], //客服列表
      showOnlineKefu: false, //是否显示在线客服
      likelist: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      isLoading: false,
      leftColumnList: [],
      rightColumnList: [],
      showlivewindows: false,
      liveinfo: {},
    };
  },
  onLoad: function (opt) {
	 
    this.opt = app.getopts(opt);
    // this.gettjlist();
    app.globalData.pmid = this.opt.pmid ? this.opt.pmid : 0;
    app.globalData.commerce_mid = this.opt.commerce_mid
      ? this.opt.commerce_mid
      : 0;
    app.globalData.commerce_type = this.opt.commerce_type
      ? this.opt.commerce_type
      : 0;
    this.ptype = this.opt.ptype ? this.opt.ptype : "shop";
    this.ex = this.opt.ex ? this.opt.ex : "活动开团";
    if (this.ex == "undefined" || this.ex == "null") {
      this.ex = "活动开团";
    }
    this.mendian_id = app.getCache("user_selected_mendianid");
    this.getdataBefore();
    return;
    if (
      this.isInTimeRange("09:00", "12:00") ||
      this.isInTimeRange("13:30", "18:00")
    ) {
      this.showOnlineKefu = true;
    }
  },
  onShow: function (e) {
    if (this.product.product_type == 1) {
      uni.$emit("getglassrecord");
    }
    // 页面显示时开始计时
    this.startViewCountTimer();
    this.isPageActive = true;
    this.activeStart = Date.now();
  },
  onPullDownRefresh: function () {
    this.getdataBefore();
  },
  onReachBottom: function () {
    if (this.hasMore) {
      this.page++; // 页码+1
      this.gettjlist(); // 加载下一页
    }
  },
  onShareAppMessage: function () {
    // return this._sharewx({
    // 	title: this.product.sharetitle || this.product.name,
    // 	pic: this.product.sharepic || this.product.pic
    // });
    let title = "";
    let pic = "";
    let path = "";

    if (this.shareType === "coupon") {
      return {
        title: "邀请好友领券",
        pic: this.product.pic,
        path: "/pagesExt/share/get_coupons?id=" + this.proId,
      };
    } else {
      title: this.product.sharetitle || this.product.name;
      pic: this.product.sharepic || this.product.pic;

      return this._sharewx({
        title: title,
        pic: pic,
      });
    }
    // console.log(path, '99');
  },
  onShareTimeline: function () {
    var sharewxdata = this._sharewx({
      title: this.product.sharetitle || this.product.name,
      pic: this.product.sharepic || this.product.pic,
    });
    var query = sharewxdata.path.split("?")[1] + "&seetype=circle";
    console.log(sharewxdata);
    console.log(query);
    return {
      title: sharewxdata.title,
      imageUrl: sharewxdata.imageUrl,
      query: query,
    };
  },
  onHide() {
    this.clearViewCountTimer();
    this.isPageActive = false;
  },

  onUnload: function () {
    clearInterval(interval);
    this.clearViewCountTimer();
  },
  watch: {
    jlshow(newVal) {
      if (newVal) {
        // 弹窗打开时计算scroll-view高度
        this.$nextTick(() => {
          this.calculateScrollViewHeight();
        });
      }
    },
  },
  onPageScroll(e) {
    this.scrolltopshow = e.scrollTop > 200;
  },
  computed: {
    getbuyStatus() {
      if (this.ptype == "seckill") {
        var res = "";
        if (this.seckill_status == 2) {
          res = "活动已结束";
        }
        if (this.seckill_status == 0) {
          res = "活动未开始";
        }
        return res;
      } else if (this.ptype == "groupby") {
        var res = "";
        if (this.groupby_status == 2) {
          res = "活动已结束";
        }
        if (this.groupby_status == 0) {
          res = "活动未开始";
        }
        return res;
      } else {
        return "";
      }
    },
    getController() {
      var t = "";
      switch (this.ptype) {
        case "shop":
          t = "Shop";
          break;
        case "seckill":
          t = "Seckill";
          break;
        case "groupby":
          t = "Groupby";
          break;
        default:
          t = "Shop";
          break;
      }
      return t;
    },
  },
  methods: {
    getdataBefore: function () {
      var that = this;
      if (that.ptype == "shop") {
        that.proId = that.opt.id || 0;
        that.getdata();
        that.getlist();
        that.getJC(that.proId);
        that.getSource(that.proId);
        that.getliveInfo(that.proId);
      } else if (that.ptype == "seckill") {
        var id = that.opt.id || 0;
        that.loading = true;
        app.post(
          "Seckill/product",
          {
            id: id,
            seckill_time: that.opt.seckill_time,
            seckill_date: that.opt.seckill_date,
          },
          function (res) {
            that.loading = false;
            if (res.status == 0) {
              app.alert(res.msg);
              return;
            }
            that.proId = res.product.procode;

            that.product = res.product;
            that.produce_youhuidata = res.youhuidata;
            that.nowtime = res.nowtime;
            that.seckill_duration = res.seckill_duration;
            that.seckill_starttime = res.product.starttime;
            that.seckill_endtime = res.product.end_time;
            that.showprice_dollar = res.showprice_dollar;
            that.getdata();
            that.getlist();
            that.getJC(id);
            that.getSource(id);
            that.getliveInfo(id);
            that.getdjs();
            clearInterval(interval);
            interval = setInterval(function () {
              that.nowtime = that.nowtime + 1;
              that.getdjs();
            }, 1000);
          }
        );
      } else if (that.ptype == "groupby") {
        var id = that.opt.id || 0;
        that.loading = true;
        app.post(
          "Groupby/product",
          {
            id: id,
          },
          function (res) {
            that.loading = false;
            if (res.status == 0) {
              app.alert(res.msg);
              return;
            }
            that.proId = res.product.procode;

            that.product = res.product;
            that.produce_youhuidata = res.youhuidata;
            that.nowtime = res.nowtime;
            that.seckill_duration = res.seckill_duration;
            that.seckill_starttime = res.product.starttime;
            that.showprice_dollar = res.showprice_dollar;
            that.getdata();
            that.getdjs2();
            clearInterval(interval);
            interval = setInterval(function () {
              that.nowtime = that.nowtime + 1;
              that.getdjs2();
            }, 1000);
            that.loaded({
              title: res.product.name,
              pic: res.product.pic,
            });
          }
        );
      }
    },
    getdata: function () {
      var that = this;
      var id = this.proId || 0;
      that.loading = true;
      var params = {
        id: id,
        longitude: that.longitude,
        latitude: that.latitude,
        mendian_id: that.mendian_id,
      };

      if (that.opt.commerce_mid) {
        params.commerce_mid = that.opt.commerce_mid;
      }
      if (that.opt.commerce_type) {
        params.commerce_type = that.opt.commerce_type;
      }
      if (that.opt.pmid) {
        params.pmid = that.opt.pmid;
      }
      app.get("Shop/product", params, function (res) {
        that.loading = false;
        if (res.status == 0) {
          app.alert(res.msg);
          return;
        }
        that.textset = app.globalData.textset;
        var product = res.product;
        var pagecontent = JSON.parse(product.detail);
        that.business = res.business;
        that.is_gift = res.is_gift;

        if (that.ptype == "shop") {
          that.product = product;
          that.produce_youhuidata = res.youhuidata;
        }
        that.product.amazing = res.product.amazing;
        that.product.comment_haopercent = res.product.comment_haopercent;

        that.cartnum = res.cartnum;
        that.commentlist = res.commentlist;
        that.commentcount = res.commentcount;
        that.couponlist = res.couponlist;
        that.coupon_new_list = res.couponlist;
        that.firstCoupon = that.coupon_new_list.find((item) => item.type == 41);
        that.fuwulist = res.fuwulist;
        that.pagecontent = pagecontent;
        that.shopset = res.shopset;
        that.sysset = res.sysset;
        that.title = product.name;
        that.isfavorite = res.isfavorite;
        that.showjiesheng = res.showjiesheng || 0;
        that.tjdatalist = res.tjdatalist || [];
        that.showtoptabbar = res.showtoptabbar || 0;
        that.bboglist = res.bboglist;
        that.sharepic = product.pics[0];
        that.xcx_scheme = res.xcx_scheme;
        that.showprice_dollar = res.showprice_dollar;
        that.show_money_price = res.show_money_price;
        that.member_address = res.member_address;
        if (that.commentcount > 0) {
          that.getTags();
        }
        if (product.guigedata) {
          that.productDetail = JSON.parse(product.guigedata);
        }
        uni.setNavigationBarTitle({
          title: product.name,
        });
        if (that.product.can_ziti) {
          that.showNearbyMendian = true;
          if (res.bindmendianids.length > 0) {
            that.mendian = res.mendian;
            that.mendianids = res.bindmendianids;
          }
        }

        that.kfurl = "/pages/kefu/index?bid=" + product.bid;
        if (app.globalData.initdata.kfurl != "") {
          that.kfurl = app.globalData.initdata.kfurl;
        }
        if (that.business && that.business.kfurl) {
          that.kfurl = that.business.kfurl;
        }
        if (that.product.product_type == 1) {
          //初始化时清空档案
          app.setCache("_glass_record_id", "");
        }

        that.loaded({
          title: product.sharetitle || product.name,
          pic: product.sharepic || product.pic,
          desc: product.sharedesc || product.sellpoint,
        });
        //需要定位
        if (res.needlocation) {
          app.getLocation(
            function (res) {
              that.latitude = res.latitude;
              that.longitude = res.longitude;
              that.getdata();
            },
            function (error) {
              console.log(error);
            }
          );
        }
        setTimeout(function () {
          let view0 = uni
            .createSelectorQuery()
            .in(that)
            .select("#scroll_view_tab0");
          view0
            .fields(
              {
                size: true, //是否返回节点尺寸（width height）
                rect: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                scrollOffset: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
              },
              (res) => {
                console.log(res);
                that.scrolltab0Height = res.height;
              }
            )
            .exec();
          let view1 = uni
            .createSelectorQuery()
            .in(that)
            .select("#scroll_view_tab1");
          view1
            .fields(
              {
                size: true, //是否返回节点尺寸（width height）
                rect: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                scrollOffset: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
              },
              (res) => {
                console.log(res);
                that.scrolltab1Height = res.height;
              }
            )
            .exec();
          let view2 = uni
            .createSelectorQuery()
            .in(that)
            .select("#scroll_view_tab2");
          view2
            .fields(
              {
                size: true, //是否返回节点尺寸（width height）
                rect: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                scrollOffset: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
              },
              (res) => {
                console.log(res);
                that.scrolltab2Height = res.height;
              }
            )
            .exec();
          that.isLoding = false;
        }, 700);
      });
    },
    getlist: function () {
      var that = this;
      app.showLoading();
      app.get(
        "shop/purchaseHistory",
        {
          proid: that.proId,
        },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            that.purchaseHistory = res.data;
          } else {
            app.error(res.msg);
          }
        }
      );
    },
    getdjs: function () {
      var that = this;
      var nowtime = that.nowtime * 1;
      var seckill_duration = that.seckill_duration * 1;
      var seckill_starttime = that.seckill_starttime * 1;
      // var seckill_endtime = that.seckill_starttime + seckill_duration * 3600 ;
      var seckill_endtime = that.seckill_endtime * 1;
      if (seckill_endtime < nowtime) {
        //已结束
        that.seckill_status = 2;
        that.djshour = "00";
        that.djsmin = "00";
        that.djssec = "00";
      } else {
        if (seckill_starttime > nowtime) {
          //未开始
          that.seckill_status = 0;
          var totalsec = seckill_starttime - nowtime;
        } else {
          //进行中
          that.seckill_status = 1;
          var totalsec = seckill_endtime - nowtime;
        }
        var houer = Math.floor(totalsec / 3600);
        var min = Math.floor((totalsec - houer * 3600) / 60);
        var sec = totalsec - houer * 3600 - min * 60;
        var djs =
          (houer < 10 ? "0" : "") +
          houer +
          "时" +
          (min < 10 ? "0" : "") +
          min +
          "分" +
          (sec < 10 ? "0" : "") +
          sec +
          "秒";
        var djshour = (houer < 10 ? "0" : "") + houer;
        var djsmin = (min < 10 ? "0" : "") + min;
        var djssec = (sec < 10 ? "0" : "") + sec;
        that.djshour = djshour;
        that.djsmin = djsmin;
        that.djssec = djssec;
      }
    },
    getdjs2: function () {
      var that = this;
      var nowtime = that.nowtime * 1;
      var starttime = that.product.starttime * 1;
      var endtime = that.product.endtime * 1;
      if (endtime < nowtime) {
        //已结束
        that.groupby_status = 2;
        that.djshour = "00";
        that.djsmin = "00";
        that.djssec = "00";
      } else {
        if (starttime > nowtime) {
          //未开始
          that.groupby_status = 0;
          var totalsec = starttime - nowtime;
        } else {
          //进行中
          that.groupby_status = 1;
          var totalsec = endtime - nowtime;
        }
        var houer = Math.floor(totalsec / 3600);
        var min = Math.floor((totalsec - houer * 3600) / 60);
        var sec = totalsec - houer * 3600 - min * 60;
        var djs =
          (houer < 10 ? "0" : "") +
          houer +
          "时" +
          (min < 10 ? "0" : "") +
          min +
          "分" +
          (sec < 10 ? "0" : "") +
          sec +
          "秒";
        var djshour = (houer < 10 ? "0" : "") + houer;
        var djsmin = (min < 10 ? "0" : "") + min;
        var djssec = (sec < 10 ? "0" : "") + sec;
        that.djshour = djshour;
        that.djsmin = djsmin;
        that.djssec = djssec;
      }
    },
    setShareType(type) {
      this.shareType = type;
    },
    getTags() {
      var that = this;
      app.get(
        "Shop/commentlist",
        {
          proid: that.proId,
        },
        function (res) {
          that.tag_sums = res.tag_sums;
          that.statistics = res.statistics;
        }
      );
    },
    getCoupons() {
      var that = this;
      app.get(
        "coupon/getprocoupon",
        {
          pro_id: that.proId,
        },
        function (res) {
          if (res.code == 200) {
            that.coupon_list = res.data.map((item) => {
              return {
                ...item,
                isClaimed: false,
              };
            });
            that.coupon_list_data = res;
            that.youhuidata = res.youhuidata;
            that.getshow = true;
          } else {
            app.error(res.msg);
          }
        }
      );
    },
    calculateRemainingTime(starttime, endtime) {
      const now = new Date();
      const startTime = new Date(starttime);
      const endTime = new Date(endtime);

      if (now >= startTime && now <= endTime) {
        const timeDiff = endTime - now;
        const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        const hours = Math.floor(
          (timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        return `仅剩${days}天${hours}小时${minutes}分钟`;
      } else if (now < startTime) {
        return "优惠券尚未生效";
      } else {
        return "优惠券已过期";
      }
    },
    claimCoupon(item, index) {
      var that = this;
      app.post(
        "Coupon/getcoupon",
        {
          id: item.id,
        },
        function (res) {
          if (res.status == 1) {
            app.success(res.msg);
            that.coupon_list[index].has_record = 1;
            that.$forceUpdate();
          } else {
            app.error(res.msg);
          }
        }
      );
    },
    handleClaim(item, index) {
      var that = this;

      that.loading = true;
      // #ifdef MP-WEIXIN
      app.get(
        "Wxtmpl/getTmplIds",
        {
          type: 4,
        },
        function (res) {
          that.loading = false;
          var tmplIds = res.res;
          if (res.status == 200) {
            wx.requestSubscribeMessage({
              tmplIds: tmplIds,
              complete(res, err) {
                that.claimCoupon(item, index);
              },
            });
          } else {
          }
        }
      );
      // #endif
      // #ifdef H5
      that.claimCoupon(item, index);
      // #endif
    },
    handClaim(item) {
      var that = this;
      that.loading = true;
      // #ifdef MP-WEIXIN
      app.get(
        "Wxtmpl/getTmplIds",
        {
          type: 4,
        },
        function (res) {
          that.loading = false;
          var tmplIds = res.res;
          if (res.status == 200) {
            wx.requestSubscribeMessage({
              tmplIds: tmplIds,
              complete(res, err) {
                that.getClaim(item);
              },
            });
          } else {
          }
        }
      );
      // #endif
      // #ifdef H5
      that.getClaim(item);
      // #endif
    },
    getClaim(item) {
      var that = this;
      app.post(
        "Coupon/getcoupon",
        {
          id: item.id,
        },
        function (res) {
          if (res.status == 1) {
            app.success(res.msg);
            that.firstCoupon.haveget = 1;
            that.$forceUpdate();
          } else {
            app.error(res.msg);
          }
        }
      );
    },
    formatProductTitle(title) {
      if (!title) return "...可用";
      const maxLength = 10;
      if (title.length > maxLength) {
        return title.slice(0, maxLength) + "...可用";
      }
      return title + "...可用";
    },
    getclose() {
      this.getshow = false;
    },
    opentips() {
      this.showTips = !this.showTips;
    },
    getStarImage(index, haopercent) {
      if (index < Math.floor(haopercent)) {
        // 完整星星
        return "/static/img/star2.png";
      } else if (index === Math.floor(haopercent) && haopercent % 1 !== 0) {
        // 半星
        return "/static/img/star-half.png";
      } else {
        // 灰色星星
        return "/static/img/star.png";
      }
    },
    calculateScrollViewHeight() {
      const systemInfo = uni.getSystemInfoSync();
      const windowHeight = systemInfo.windowHeight;
      // 预留标题栏高度和底部安全距离
      const titleHeight = 88; // popup__title的高度，根据实际调整
      const bottomSafeArea = systemInfo.safeAreaInsets
        ? systemInfo.safeAreaInsets.bottom
        : 0;
      // 设置scroll-view的高度为窗口高度的60%减去标题高度
      this.scrollViewHeight = windowHeight * 0.6 - titleHeight - bottomSafeArea;
    },
    // 计算时间差，返回几小时或几天前
    formatTime(dateString) {
      const now = new Date();
      const date = new Date(dateString.replace(" ", "T"));
      const diffInSeconds = Math.floor((now - date) / 1000); // 时间差（秒）
      const diffInMinutes = Math.floor(diffInSeconds / 60); // 时间差（分钟）
      const diffInHours = Math.floor(diffInMinutes / 60); // 时间差（小时）
      const diffInDays = Math.floor(diffInHours / 24); // 时间差（天）

      // 判断并返回时间差
      if (diffInDays > 0) {
        return `${diffInDays}天前`;
      } else if (diffInHours > 0) {
        return `${diffInHours}小时前`;
      } else if (diffInMinutes > 0) {
        return `${diffInMinutes}分钟前`;
      } else {
        return "刚刚";
      }
    },
    jlclose() {
      this.jlshow = false;
    },
    jlmore() {
      var that = this;
      that.currentPage = 1; // 重置页码
      that.noMore = false; // 重置加载状态
      that.purchaseHistory = []; // 清空历史数据

      app.get(
        "shop/purchaseHistory",
        {
          proid: that.proId,
          page: that.currentPage,
        },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            that.purchaseHistory = res.data;
            that.jlshow = true;
            // 如果返回的数据少于预期，说明没有更多数据了
            if (res.data.length < 10) {
              // 假设每页10条数据
              that.noMore = true;
            }
          } else {
            app.error(res.msg);
          }
        }
      );
    },
    loadMoreJl() {
      if (this.loading || this.noMore) return;
      var that = this;
      that.loading = true;
      that.currentPage += 1;
      app.get(
        "shop/purchaseHistory",
        {
          proid: that.proId,
          page: that.currentPage,
        },
        function (res) {
          that.loading = false;
          if (res.status == 200) {
            if (res.data && res.data.length > 0) {
              that.purchaseHistory = [...that.purchaseHistory, ...res.data];
              // 如果返回的数据少于预期，说明没有更多数据了
              if (res.data.length < 10) {
                // 假设每页10条数据
                that.noMore = true;
              }
            } else {
              that.noMore = true;
            }
          } else {
            app.error(res.msg);
          }
        }
      );
    },
    open() {
      app.get(
        "Shop/guaranteeList",
        {
          proid: this.proId,
        },
        (res) => {
          if (res.status === 200) {
            this.guaranteeList = res.data;
            this.fwshow = true;
          } else {
            app.error(res.msg);
          }
        }
      );
    },
    closePop() {
      this.$refs.notice.close();
    },
    showLinkChange: function () {
      this.showLinkStatus = !this.showLinkStatus;
    },
    swiperChange: function (e) {
      var that = this;
      that.current = e.detail.current;
    },
    payvideo: function () {
      this.isplay = 1;
      uni.createVideoContext("video").play();
    },
    parsevideo: function () {
      this.isplay = 0;
      uni.createVideoContext("video").stop();
    },
    buydialogChange: function (e) {
      if (!this.buydialogShow && e) {
        this.btntype = e.currentTarget.dataset.btntype;
      }
      this.buydialogShow = !this.buydialogShow;
      this.getshow = false;
    },
    //收藏操作
    addfavorite: function () {
      var that = this;
      var proid = that.product.id;
      app.post(
        that.getController + "/addfavorite",
        {
          proid: proid,
          type: that.ptype,
        },
        function (data) {
          if (data.status == 1) {
            that.isfavorite = !that.isfavorite;
          }
          app.success(data.msg);
        }
      );
    },
    shareClick: function () {
      this.sharetypevisible = true;
    },
    shareClick1: function () {
      app.goto(
        "/pagesExt/share/share_goods?id=" +
          this.product.id +
          "&ptype=" +
          this.ptype
      );
    },
    handleClickMask: function () {
      this.sharetypevisible = false;
    },
    showPoster: function () {
      var that = this;
      that.showposter = true;
      that.sharetypevisible = false;
      app.showLoading("生成海报中");
      app.post(
        that.getController + "/getposter",
        {
          proid: that.product.id,
        },
        function (data) {
          app.showLoading(false);
          if (data.status == 0) {
            app.alert(data.msg);
          } else {
            that.posterpic = data.poster;
          }
        }
      );
    },
    shareScheme: function () {
      var that = this;
      app.showLoading();
      app.post(
        "Shop/getwxScheme",
        {
          proid: that.product.id,
        },
        function (data) {
          app.showLoading(false);
          if (data.status == 0) {
            app.alert(data.msg);
          } else {
            that.showScheme = true;
            that.schemeurl = data.openlink;
          }
        }
      );
    },
    schemeDialogClose: function () {
      this.showScheme = false;
    },
    posterDialogClose: function () {
      this.showposter = false;
    },
    showfuwudetail: function () {
      this.showfuwudialog = true;
    },
    hidefuwudetail: function () {
      this.fwshow = false;
    },
    showcuxiaodetail: function () {
      this.showcuxiaodialog = true;
    },
    hidecuxiaodetail: function () {
      this.showcuxiaodialog = false;
    },
    getcoupon: function () {
      this.showcuxiaodialog = false;
      this.getdataBefore();
    },
    scrollToTop() {
      this.scrollToViewId = "scroll_view_tab00";
      setTimeout(() => {
        this.scrollToViewId = "scroll_view_tab0";
        this.scrolltopshow = false;
      }, 100);
    },
    changetoptab: function (e) {
      this.scrollToViewId = "scroll_view_tab" + index + 1;
      var index = e.currentTarget.dataset.index;
      this.scrollToViewId = "scroll_view_tab" + index;
      this.toptabbar_index = index;
      this.scrolltopshow = false;
    },
    scroll: function (e) {
      var scrollTop = e.detail.scrollTop;
      //console.log(e)
      var that = this;
      if (scrollTop > 200) {
        that.scrolltopshow = true;
      }
      if (scrollTop < 150) {
        that.scrolltopshow = false;
      }
      if (scrollTop > 100) {
        that.toptabbar_show = true;
      }
      if (scrollTop < 50) {
        that.toptabbar_show = false;
      }
      var height0 = that.scrolltab0Height;
      var height1 = that.scrolltab0Height + that.scrolltab1Height;
      var height2 =
        that.scrolltab0Height + that.scrolltab1Height + that.scrolltab2Height;
      //var height3 = that.scrolltab0Height + that.scrolltab1Height + that.scrolltab2Height + that.scrolltab3Height;
      if (scrollTop >= 0 && scrollTop < height0) {
        //this.scrollToViewId = 'scroll_view_tab0';
        this.toptabbar_index = 0;
      } else if (scrollTop >= height0 && scrollTop < height1) {
        //this.scrollToViewId = 'scroll_view_tab1';
        this.toptabbar_index = 1;
      } else if (scrollTop >= height1 && scrollTop < height2) {
        //this.scrollToViewId = 'scroll_view_tab2';
        this.toptabbar_index = 2;
      } else if (scrollTop >= height2) {
        //this.scrollToViewId = 'scroll_view_tab3';
        this.toptabbar_index = 3;
      }
    },
    sharemp: function () {
      app.error("点击右上角发送给好友或分享到朋友圈");
      this.sharetypevisible = false;
    },
    shareapp: function () {
      var that = this;
      that.sharetypevisible = false;
      uni.showActionSheet({
        itemList: ["发送给微信好友", "分享到微信朋友圈"],
        success: function (res) {
          if (res.tapIndex >= 0) {
            var scene = "WXSceneSession";
            if (res.tapIndex == 1) {
              scene = "WXSenceTimeline";
            }
            var sharedata = {};
            sharedata.provider = "weixin";
            sharedata.type = 0;
            sharedata.scene = scene;
            sharedata.title = that.product.sharetitle || that.product.name;
            sharedata.summary =
              that.product.sharedesc || that.product.sellpoint;
            sharedata.href =
              app.globalData.pre_url +
              "/h5/" +
              app.globalData.aid +
              ".html#/pages/shop/product?scene=id_" +
              that.product.id +
              "-pid_" +
              app.globalData.mid;
            sharedata.imageUrl = that.product.pic;
            var sharelist = app.globalData.initdata.sharelist;
            if (sharelist) {
              for (var i = 0; i < sharelist.length; i++) {
                if (sharelist[i]["indexurl"] == "/pages/shop/product") {
                  sharedata.title = sharelist[i].title;
                  sharedata.summary = sharelist[i].desc;
                  sharedata.imageUrl = sharelist[i].pic;
                  if (sharelist[i].url) {
                    var sharelink = sharelist[i].url;
                    if (sharelink.indexOf("/") === 0) {
                      sharelink =
                        app.globalData.pre_url +
                        "/h5/" +
                        app.globalData.aid +
                        ".html#" +
                        sharelink;
                    }
                    if (app.globalData.mid > 0) {
                      sharelink +=
                        (sharelink.indexOf("?") === -1 ? "?" : "&") +
                        "pid=" +
                        app.globalData.mid;
                    }
                    sharedata.href = sharelink;
                  }
                }
              }
            }
            uni.share(sharedata);
          }
        },
      });
    },
    callMendian: function (e) {
      var tel = e.currentTarget.dataset.tel;
      uni.makePhoneCall({
        phoneNumber: tel,
        fail: function () {},
      });
    },
    toMendian: function (e) {
      var latitude = parseFloat(e.currentTarget.dataset.latitude);
      var longitude = parseFloat(e.currentTarget.dataset.longitude);
      var address = e.currentTarget.dataset.address;
      if (!latitude || !longitude) {
        return;
      }
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        name: address,
        scale: 13,
      });
    },
    showsubqrcode: function () {
      this.$refs.qrcodeDialog.open();
    },
    closesubqrcode: function () {
      this.$refs.qrcodeDialog.close();
    },
    addcart: function (e) {
      console.log(e);
      this.cartnum = this.cartnum + e.num;
    },
    showgg1Dialog: function () {
      this.$refs.gg1Dialog.open();
    },
    closegg1Dialog: function () {
      this.$refs.gg1Dialog.close();
    },
    showgg2Dialog: function () {
      this.$refs.gg2Dialog.open();
    },
    closegg2Dialog: function () {
      this.$refs.gg2Dialog.close();
    },
    getJC: function (id) {
      let that = this;
      // if(!that.shopset.is_show_detection == 1) return;
      app.get(
        "ShopProductDetection/productDetectionList",
        {
          proid: id,
        },
        function (res) {
          if (res.status == 200) {
            that.reportList = res.data.list;
            if (res.data.list.length > 0) {
              // 1. 解析输入日期
              const targetDate = new Date(res.data.list[0].detection_date);
              if (isNaN(targetDate.getTime())) {
                console.error('无效的日期格式，请使用 "YYYY-MM-DD" 格式');
              }
              // 2. 获取当前时间（去掉时分秒）
              const now = new Date();
              const currentDate = new Date(
                now.getFullYear(),
                now.getMonth(),
                now.getDate()
              );
              // 3. 计算相差天数
              const timeDiff = targetDate.getTime() - currentDate.getTime();
              const dayDiff = Math.abs(timeDiff / (1000 * 60 * 60 * 24));
              // 4. 判断是否在一周左右范围内
              if (dayDiff <= 7) {
                that.reportList[0] = {
                  ...that.reportList[0], // 展开原有属性
                  isNew: true, // 添加新属性
                };
              }
            }
          } else {
            // app.error(res.msg)
          }
        }
      );
    },
    switchTab(index) {
      this.activeTab = index;
      app.goto(`/pagesSocial/detection/report?proid=` + this.proId);
    },
    getSource: function (id) {
      let that = this;
      // if(!that.shopset.is_show_album == 1) return;
      app.get(
        "SocialSourceAlbum/list",
        {
          proid: id,
        },
        function (res) {
          if (res.status == 200) {
            if (res.data.length > 0) {
              that.Source = res.data[0];
            }
          } else {
            // app.error(res.msg);
          }
        }
      );
    },
    toSource() {
      app.goto(
        `/pagesSocial/album/album?share_type=1&album_id=${this.Source.id}`
      );
    },
    toSales() {
      // const cidArray  = this.product.cid.split(',');
      // const cid = cidArray[0];
      const cid = this.product.rankcid;
      const proid = this.opt.id;
      uni.navigateTo({
        url: `/pagesSocial/sales/index?cid=${cid}&proid=${proid}&type=1`,
      });
    },
    // 开始访问计时
    startViewCountTimer() {
      // 如果已经记录过，不再重复
      if (this.hasRecorded) return;

      // 清除可能存在的旧计时器
      this.clearViewCountTimer();

      // 设置新计时器
      this.viewTimer = setTimeout(() => {
        this.recordViewCount();
      }, 3000); // 3秒后执行
    },
    // 清除计时器
    clearViewCountTimer() {
      if (this.viewTimer) {
        clearTimeout(this.viewTimer);
        this.viewTimer = null;
      }
    },
    // 记录有效访问
    async recordViewCount() {
      if (!this.opt.id || !this.isPageActive) return;

      const stayTime = Date.now() - this.activeStart;

      if (stayTime < 3000) return;

      try {
        const res = await app.get("Shop/addProViewCount", {
          proid: this.opt.id,
        });
        if (res.status == 200) {
          this.hasRecorded = true;
        }
      } catch (error) {}
    },

    //#region 客服相关
    openkefu() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("top");
      this.getkefulist();
    },
    getkefulist() {
      let that = this;
      app.get("kefu/getList", {}, function (res) {
        if (res.code == 200) {
          that.kefuList = res.data;
        }
      });
    },
    tokefu(data) {
      if (data.id) {
        app.goto(
          "/pagesChat/chat/index?id=" +
            data.id +
            "&type=1&name=" +
            data.nickname +
            "&headimg=" +
            data.headimg
        );
        this.$refs.popup.close();
        uni.setStorageSync("ChatData", {
          type: "product",
          proid: this.opt.id,
          name: this.product.name,
          pic: this.product.pic,
          sell_price: this.product.sell_price,
          ptype: this.ptype,
        });
      }
    },

    // 页面显示时
    /**
     * 判断当前时间是否在指定时间段内
     * @param {string} startTime 开始时间，格式 'HH:mm' 如 '08:00'
     * @param {string} endTime 结束时间，格式 'HH:mm' 如 '20:00'
     * @returns {boolean} 是否在时间段内
     */
    isInTimeRange(startTime, endTime) {
      const now = new Date();
      const currentHours = now.getHours();
      const currentMinutes = now.getMinutes();
      // 解析开始时间
      const [startHours, startMins] = startTime.split(":").map(Number);
      // 解析结束时间
      const [endHours, endMins] = endTime.split(":").map(Number);
      // 当前总分钟数
      const currentTotalMins = currentHours * 60 + currentMinutes;
      // 开始时间总分钟数
      const startTotalMins = startHours * 60 + startMins;
      // 结束时间总分钟数
      const endTotalMins = endHours * 60 + endMins;
      return (
        currentTotalMins >= startTotalMins && currentTotalMins <= endTotalMins
      );
    },
    //#endregion

    gettjlist() {
      if (!this.hasMore || this.isLoading) return;
      this.isLoading = true;
      const that = this;

      app.get(
        "Shop/guessLikeProduct",
        {
          page: this.page,
          pagelimit: this.pageSize,
        },
        function (res) {
          that.isLoading = false;

          if (res.status == 200) {
            const newData = res.data;
            if (that.page === 1) {
								if (newData.length >= 10) {
									that.likelist = newData;
								} else {
									that.likelist = [...that.likelist, ...newData];
									that.page = 2;
									that.gettjlist()
								}
            } else {
              that.likelist = [...that.likelist, ...newData];
            }

            // 拆分数据到左右两列（模拟瀑布流）
            that.splitDataToColumns();

            that.hasMore = newData.length >= that.pageSize;
            that.page++;
          } else {
            app.error(res.msg);
          }
        }
      );
    },

    scrolltoBottom() {
      this.gettjlist();
    },

    // 将数据拆分成左右两列（模拟瀑布流）
    splitDataToColumns() {
      this.leftColumnList = [];
      this.rightColumnList = [];

      this.likelist.forEach((item, index) => {
        if (index % 2 === 0) {
          this.leftColumnList.push(item);
        } else {
          this.rightColumnList.push(item);
        }
      });
    },

    getliveInfo(id) {
      let that = this;
      app.get(
        "Shop/getProductLive",
        {
          proid: id,
        },
        (res) => {
          if (res.status == 200) {
            if (res.data.id) {
              that.liveinfo = res.data;
              that.showlivewindows = true;
              setTimeout(() => {
                uni.$emit("resetSmaillWindow");
              }, 500);
            }
          }
        }
      );
    },

    goToLive() {
      app.goto(
        "/pages/index/webView?url=" +
          encodeURIComponent(this.liveinfo.watch_url)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  position: relative;
  width: 100%;
  height: 100%;
}

.container {
  height: 100vh;
}

.follow_topbar {
  height: 88rpx;
  width: 100%;
  max-width: 640px;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  z-index: 13;
}

.follow_topbar .headimg {
  height: 64rpx;
  width: 64rpx;
  margin: 6px;
  float: left;
}

.follow_topbar .headimg image {
  height: 64rpx;
  width: 64rpx;
}

.follow_topbar .info {
  height: 56rpx;
  padding: 16rpx 0;
}

.follow_topbar .info .i {
  height: 28rpx;
  line-height: 28rpx;
  color: #ccc;
  font-size: 24rpx;
}

.follow_topbar .info {
  height: 80rpx;
  float: left;
}

.follow_topbar .sub {
  height: 48rpx;
  width: auto;
  background: #fc4343;
  padding: 0 20rpx;
  margin: 20rpx 16rpx 20rpx 0;
  float: right;
  font-size: 24rpx;
  color: #fff;
  line-height: 52rpx;
  border-radius: 6rpx;
}

.qrcodebox {
  background: #fff;
  padding: 50rpx;
  position: relative;
  border-radius: 20rpx;
}

.qrcodebox .img {
  width: 400rpx;
  height: 400rpx;
}

.qrcodebox .txt {
  color: #666;
  margin-top: 20rpx;
  font-size: 26rpx;
  text-align: center;
}

.qrcodebox .close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  bottom: -100rpx;
  left: 50%;
  margin-left: -25rpx;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 8rpx;
}

.swiper-container {
  position: relative;
  height: 750rpx;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 750rpx;
  overflow: hidden;
}

.swiper-item-view {
  width: 100%;
  height: 750rpx;
}

.swiper .img {
  width: 100%;
  height: 750rpx;
  overflow: hidden;
}

.imageCount {
  width: 100rpx;
  height: 50rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 40rpx;
  line-height: 50rpx;
  color: #fff;
  text-align: center;
  font-size: 26rpx;
  position: absolute;
  right: 13px;
  bottom: 20rpx;
}

.provideo {
  background: rgba(255, 255, 255, 0.7);
  width: 160rpx;
  height: 54rpx;
  padding: 0 20rpx 0 4rpx;
  border-radius: 27rpx;
  position: absolute;
  bottom: 30rpx;
  left: 50%;
  margin-left: -80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.provideo image {
  width: 50rpx;
  height: 50rpx;
}

.provideo .txt {
  flex: 1;
  text-align: center;
  padding-left: 10rpx;
  font-size: 24rpx;
  color: #333;
}

.videobox {
  width: 100%;
  height: 750rpx;
  text-align: center;
  background: #000;
}

.videobox .video {
  width: 100%;
  height: 650rpx;
}

.videobox .parsevideo {
  margin: 0 auto;
  margin-top: 20rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #333;
  background: #ccc;
  width: 140rpx;
  border-radius: 25rpx;
  font-size: 24rpx;
}

.seckill_title {
  width: 100%;
  /* height: 110rpx; */
  background: linear-gradient(180deg, #ff3143 0%, #fd6647 100%);
  display: flex;
  align-items: center;

  /* border-radius: 30rpx 30rpx 0 0; */
  .f0 {
    width: 88rpx;
    height: 88rpx;
    margin-left: 20rpx;
  }

  .f1 {
    flex: 1;
    padding: 10rpx 20rpx;
    display: flex;
    flex-direction: column;
    position: relative;

    .t1 {
      font-size: 40rpx;
      color: #fff;
      line-height: 50rpx;

      .x2 {
        padding-left: 8rpx;
        font-size: 30rpx;
        color: #fff;
        text-decoration: line-through;
      }

      .x22 {
        padding-left: 8rpx;
        font-size: 50rpx;
      }
    }

    .x222 {
      font-size: 20rpx;
      border-radius: 40rpx 40rpx 40rpx 0px;
      background-color: #fff;
      padding: 4rpx 14rpx;
      position: absolute;
      top: -28rpx;
      right: 0;
      color: #ee1138;
    }

    .t2 {
      color: #fff;
      font-size: 22rpx;
    }
  }

  .f3 {
    // width: 250rpx;
    /* height: 110rpx; */
    /* background: #FFDBDF; */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 18rpx;
    gap: 8rpx;

    .t2 {
      // color: #FF3143
      display: flex;
      line-height: 36rpx;
      gap: 8rpx;
    }

    .f3-fw {
      font-weight: 700;
      color: #fff;
      font-size: 48rpx;
    }

    .f3-text {
      display: flex;
      align-items: center;
      font-size: 26rpx;
    }

    .f3-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .f4 {
    width: 250rpx;
    height: 110rpx;
    background: #ffdbdf;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .t2 {
      color: #ff3143;
    }
  }

  .djsspan {
    font-size: 22rpx;
    border-radius: 8rpx;
    background: #ce2533;
    color: #fff;
    text-align: center;
    padding: 4rpx 8rpx;
    margin: 0 4rpx;
  }
}

.tg_pricedata {
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  padding: 0 3%;
  padding-top: 0;
  position: relative;
  min-height: 100rpx;
}

.tg_pricetitle {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  color: #555;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.tg_price {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px dotted #ddd;
}

.tg_price .t1 {
  flex-shrink: 0;
}

.header {
  width: 100%;
  padding: 20rpx 3%;
  background: #fff;
}

.header .price_share {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .price_share .price {
  display: flex;
  align-items: flex-end;
}

.header .price_share .price .f1 {
  font-size: 50rpx;
  color: #51b539;
  font-weight: bold;
}

.header .price_share .price .f2 {
  font-size: 26rpx;
  color: #c2c2c2;
  text-decoration: line-through;
  margin-left: 30rpx;
  padding-bottom: 5px;
}

.header .price_share .share {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60rpx;
}

.header .price_share .share .img {
  width: 32rpx;
  height: 32rpx;
  margin-bottom: 2px;
}

.header .price_share .share .txt {
  color: #333333;
  font-size: 20rpx;
}

.header .points {
  padding: 10rpx 0;
  color: #ff7a18;
}

.header .title {
  color: #000000;
  font-size: 30rpx;
  line-height: 46rpx;
  font-weight: bold;
  margin-top: 5rpx;
}

.title-tags {
  background: linear-gradient(to right, #03bc01, #5fc55f);
  color: #fff;
  padding: 6rpx 10rpx;
  font-size: 22rpx;
  border-radius: 10rpx;
  margin: 0rpx 15rpx 15rpx 0;
}

.header .price_share .title {
  display: flex;
  align-items: flex-end;
}

.header .sellpoint {
  font-size: 28rpx;
  color: #f16600;
  padding-top: 20rpx;
}

.header .sales_stock {
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 30rpx;
  font-size: 24rpx;
  color: #777777;
}

.header .commission {
  display: inline-block;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  font-size: 20rpx;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 20rpx;
}

.header .upsavemoney {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  font-size: 20rpx;
  height: 70rpx;
  padding: 0 20rpx;
}

.choose {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 3%;
  color: #333;
}

.gg-choose {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  margin-top: 20rpx;

  padding: 3%;
  color: #333;
}

.gg-choose .f0 {
  color: #555;
  font-weight: bold;
  height: 32rpx;
  font-size: 24rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.gg-choose .f2 {
  width: 32rpx;
  height: 32rpx;
}

.choose .f0 {
  color: #555;
  font-weight: bold;
  height: 32rpx;
  font-size: 24rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.choose .f2 {
  width: 32rpx;
  height: 32rpx;
}

.cuxiaodiv {
  background: #fff;
  margin-top: 20rpx;
  padding: 0 3%;
}

.jiance {
  background: linear-gradient(to bottom, #d7f9e3, #f5fef8);
  margin-top: 10px;
  padding: 3%;

  .jc-title {
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin: 5rpx auto;

    .jc-1 {
      width: 40rpx;
      height: 40rpx;
      background-color: #c8ffec;
    }

    .jc-2 {
      font-size: 32rpx;
      font-weight: bold;
      color: #143a39;
    }

    .jc-3 {
      font-size: 27rpx;
      color: #4e7d7c;
    }
  }

  .fixed-header {
    // position: fixed;
    // top: 0;
    // left: 0;
    // right: 0;
    // background: #fff;
    // z-index: 100;

    .tip-header {
      .tip-text {
        font-size: 23rpx;
        color: #666;
        line-height: 1.6;
      }
    }

    .tab-list {
      padding: 20rpx 0;

      .tab-scroll {
        width: 100%;
        white-space: nowrap;

        .tab-items {
          display: inline-flex;

          .tab-item {
            display: inline-flex;
            flex-direction: column;
            padding: 16rpx 24rpx;
            background: #fff;
            border-radius: 12rpx;
            margin-right: 20rpx;
            width: 55vw;
            position: relative;

            &.active {
              border: #00b578 2rpx solid;
            }

            .tab-c {
              display: flex;
              align-items: center;
              margin-bottom: 16rpx;
              gap: 8rpx;

              .info-c {
                display: flex;
                align-items: center;

                .info-icon {
                  width: 50rpx;
                  height: 50rpx;
                }

                .info-badge {
                  display: inline-flex;
                  align-items: center;
                  background: #2faa8f;
                  border-radius: 8rpx;
                  padding: 6rpx;
                  margin-left: -20rpx;
                  padding-left: 25rpx;

                  text {
                    font-size: 23rpx;
                    color: #fff;
                    padding: 3rpx 3rpx;
                  }

                  .test-count {
                    font-size: 20rpx;
                    color: #00b578;
                    margin-left: 6rpx;
                    background-color: #fff;
                    border-radius: 8rpx;
                  }
                }
              }

              .tab-date {
                font-size: 26rpx;
              }

              .tab-count {
                font-size: 24rpx;
                margin-left: 3rpx;
                background-color: #ebfaf6;
              }
            }

            .tab-content {
              display: flex;
              align-items: center;

              .new-tag {
                background: #ff6b6b;
                color: #fff;
                font-size: 20rpx;
                padding: 2rpx 8rpx;
                border-radius: 4rpx;
                margin-right: 8rpx;
              }

              .tab-text {
                font-size: 26rpx;
                color: #333;
                font-weight: bold;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .stamp-image {
              width: 80rpx;
              height: 80rpx;
              opacity: 0.6;
              transform: rotate(30deg);
              position: absolute;
              bottom: 10rpx;
              right: 10rpx;
            }
          }
        }
      }
    }
  }
}

.source {
  background: #fff;
  margin-top: 10px;
  padding: 3%;

  .sr-title {
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin: 5rpx auto;

    .sr-1 {
      width: 40rpx;
      height: 40rpx;
      background-color: #00b68f;
    }

    .sr-2 {
      font-size: 32rpx;
      font-weight: bold;
      color: #143a39;
    }
  }

  .sr-content {
    .image-container {
      position: relative;
      width: 100%;
      top: 20rpx;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 20rpx;
    }

    .album-image {
      width: 100%;
      height: 180rpx;
      position: relative;
    }

    .album-content {
      padding: 20rpx;
      position: absolute;
      top: 0;
      left: 10rpx;
      right: 0;

      .album-title {
        font-size: 42rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 10rpx;
        // text-shadow: #000 1px 1px 2px;//字体阴影
      }

      .album-desc {
        font-size: 28rpx;
        color: #fff;
        margin-bottom: 20rpx;
      }
    }

    .sr-bottom {
      background: linear-gradient(to right, #d6f5f9, #f7fdfe);
      font-size: 30rpx;
      margin-top: -6rpx;
      padding-left: 30rpx;
      height: 50rpx;
      line-height: 50rpx;
    }
  }
}

.fuwupoint {
  width: 100%;
  font-size: 24rpx;
  color: #333;
  height: 88rpx;
  line-height: 88rpx;
  padding: 12rpx 0;
  display: flex;
  align-items: center;
}

.fuwupoint .f0 {
  color: #555;
  font-weight: bold;
  height: 32rpx;
  font-size: 24rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fuwupoint .f1 {
  margin-right: 20rpx;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.fuwupoint .f1 .t {
  padding: 4rpx 20rpx 4rpx 0;
  color: #777;
  flex-shrink: 0;
}

.fuwupoint .f1 .t:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-top: -4rpx;
  margin-right: 10rpx;
  width: 24rpx;
  height: 24rpx;
  background: url("")
    no-repeat;
  background-size: 24rpx auto;
}

.fuwupoint .f2 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
}

.fuwupoint .f2 .img {
  width: 32rpx;
  height: 32rpx;
}

.fuwudialog-content {
  font-size: 24rpx;
}

.fuwudialog-content .f1 {
  color: #333;
  height: 80rpx;
  line-height: 80rpx;
  font-weight: bold;
}

/* .fuwudialog-content .f1:before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		margin-top: -4rpx;
		margin-right: 10rpx;
		width: 24rpx;
		height: 24rpx;
		background: url('') no-repeat;
		background-size: 24rpx auto;
	} */

.fuwudialog-content .f2 {
  color: #777;
}

.cuxiaopoint {
  width: 100%;
  font-size: 24rpx;
  color: #333;
  height: 88rpx;
  line-height: 88rpx;
  padding: 12rpx 0;
  display: flex;
  align-items: center;
}

.cuxiaopoint .f0 {
  color: #555;
  font-weight: bold;
  height: 32rpx;
  font-size: 24rpx;
  padding-right: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cuxiaopoint .f1 {
  margin-right: 20rpx;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.cuxiaopoint .f1 .t {
  margin-left: 10rpx;
  border-radius: 3px;
  font-size: 24rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding-right: 10rpx;
  flex-shrink: 0;
  overflow: hidden;
}

.cuxiaopoint .f1 .t0 {
  display: inline-block;
  padding: 0 5px;
}

.cuxiaopoint .f1 .t1 {
  padding: 0 4px;
}

.cuxiaopoint .f2 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
}

.cuxiaopoint .f2 .img {
  width: 32rpx;
  height: 32rpx;
}

.cuxiaodiv .cuxiaoitem {
  border-bottom: 1px solid #e6e6e6;
}

.cuxiaodiv .cuxiaoitem:last-child {
  border-bottom: 0;
}

.popup__container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 99;
  background: #fff;
}

.popup__overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  opacity: 0.3;
  background: #000;
}

.popup__modal {
  width: 100%;
  position: absolute;
  bottom: 0;
  color: #3d4145;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity: 1;
  padding-bottom: 20rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  z-index: 12;
  min-height: 600rpx;
  max-height: 1000rpx;
}

.popup__title {
  text-align: center;
  padding: 30rpx;
  position: relative;
  position: relative;
}

.popup__title-text {
  font-size: 32rpx;
}

.popup__close {
  position: absolute;
  top: 34rpx;
  right: 34rpx;
}

.popup__content {
  width: 100%;
  max-height: 880rpx;
  overflow-y: scroll;
  padding: 20rpx 0;
}

.service-item {
  display: flex;
  padding: 0 40rpx 20rpx 40rpx;
}

.service-item .prefix {
  padding-top: 2px;
}

.service-item .suffix {
  padding-left: 10rpx;
}

.service-item .suffix .type-name {
  font-size: 28rpx;
  color: #49aa34;
  margin-bottom: 10rpx;
}

.shop {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  padding: 20rpx 3%;
  position: relative;
  min-height: 100rpx;
}

.shop .p1 {
  width: 90rpx;
  height: 90rpx;
  border-radius: 6rpx;
  flex-shrink: 0;
}

.shop .p2 {
  padding-left: 10rpx;
}

.shop .p2 .t1 {
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  overflow: hidden;
  color: #111;
  font-weight: bold;
  font-size: 30rpx;
}

.shop .p2 .t2 {
  width: 100%;
  height: 30rpx;
  line-height: 30rpx;
  overflow: hidden;
  color: #999;
  font-size: 24rpx;
  margin-top: 8rpx;
}

.shop .p4 {
  height: 64rpx;
  line-height: 64rpx;
  color: #ffffff;
  border-radius: 32rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
  padding: 0 30rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.detail {
  min-height: 200rpx;
}

.detail_title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
  margin-bottom: 30rpx;
}

.detail_title .t0 {
  font-size: 28rpx;
  font-weight: bold;
  color: #222222;
  margin: 0 20rpx;
}

.detail_title .t1 {
  width: 12rpx;
  height: 12rpx;
  background: rgba(253, 74, 70, 0.2);
  transform: rotate(45deg);
  margin: 0 4rpx;
  margin-top: 6rpx;
}

.detail_title .t2 {
  width: 18rpx;
  height: 18rpx;
  background: rgba(253, 74, 70, 0.4);
  transform: rotate(45deg);
  margin: 0 4rpx;
}

.commentbox {
  width: 100%;
  background: #fff;
  padding: 0 3%;
  margin-top: 20rpx;
}

.commentbox .title {
  height: 90rpx;
  line-height: 90rpx;
  border-bottom: 1px solid #dddddd;
  display: flex;
}

.commentbox .title .f1 {
  flex: 1;
  color: #111111;
  font-weight: bold;
  font-size: 30rpx;
}

.commentbox .title .f2 {
  color: #333;
  font-weight: bold;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.commentbox .nocomment {
  height: 100rpx;
  line-height: 100rpx;
}

.comment {
  display: flex;
  flex-direction: column;
  min-height: 200rpx;
}

.comment .item {
  background-color: #fff;
  padding: 10rpx 20rpx;
  display: flex;
  flex-direction: column;
}

.comment .item .f1 {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10rpx 0;
}

.comment .item .f1 .t1 {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.comment .item .f1 .t2 {
  padding-left: 10rpx;
  color: #333;
  font-weight: bold;
  font-size: 30rpx;
}

.comment .item .f1 .t3 {
  text-align: right;
}

.comment .item .f1 .t3 .img {
  width: 24rpx;
  height: 24rpx;
  margin-left: 10rpx;
}

.comment .item .score {
  font-size: 24rpx;
  color: #f99716;
}

.comment .item .score image {
  width: 140rpx;
  height: 50rpx;
  vertical-align: middle;
  margin-bottom: 6rpx;
  margin-right: 6rpx;
}

.comment .item .f2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10rpx 0;
}

.comment .item .f2 .t1 {
  color: #333;
  font-size: 28rpx;
}

.comment .item .f2 .t2 {
  display: flex;
  width: 100%;
}

.comment .item .f2 .t2 image {
  width: 100rpx;
  height: 100rpx;
  margin: 10rpx;
}

.comment .item .f2 .t3 {
  color: #aaa;
  font-size: 24rpx;
}

.comment .item .f3 {
  margin: 20rpx auto;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  border: 1px solid #e6e6e6;
  border-radius: 30rpx;
  color: #111111;
  font-weight: bold;
  font-size: 26rpx;
}

.bottombar {
  width: 94%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: #fff;
  display: flex;
  height: 100rpx;
  padding: 0 4% 0 2%;
  align-items: center;
  z-index: 1;
  box-sizing: content-box;
}

.bottombar .f1 {
  flex: 1;
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.bottombar .f1 .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80rpx;
  position: relative;
}

.bottombar .f1 .item .img {
  width: 44rpx;
  height: 44rpx;
}

.bottombar .f1 .item .t1 {
  font-size: 18rpx;
  color: #222222;
  height: 30rpx;
  line-height: 30rpx;
  margin-top: 6rpx;
}

.bottombar .op {
  width: 60%;
  overflow: hidden;
  display: flex;
  border-radius: 36rpx;
}

.bottombar .tocart {
  background-color: #fff;
  /* margin-right: 24rpx; */
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  color: #000;
  border-radius: 36rpx 0rpx 0rpx 36rpx;
  border: 1px solid #ccc;
  font-size: 28rpx;
  font-weight: bold;
}

.bottombar .tobuy {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  color: #fff;
  border-radius: 0rpx 36rpx 36rpx 0;
  border: none;
  font-size: 28rpx;
  font-weight: bold;
  background-color: #000;
}

.bottombar .cartnum {
  position: absolute;
  right: 4rpx;
  top: -4rpx;
  color: #fff;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  font-size: 22rpx;
}

.bottombar .op2 {
  width: 60%;
  overflow: hidden;
  display: flex;
}

.bottombar .tocart2 {
  flex: 1;
  height: 80rpx;
  border-radius: 10rpx;
  color: #fff;
  background: #fa938a;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.bottombar .tobuy2 {
  flex: 1;
  height: 80rpx;
  border-radius: 10rpx;
  color: #fff;
  background: #df2e24;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.paramitem {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
  padding: 20rpx;
}

.paramitem .f1 {
  width: 30%;
  color: #666;
}

.paramitem .f2 {
  color: #333;
}

.paramitem:last-child {
  border-bottom: 0;
}

.xihuan {
  height: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20rpx 160rpx;
  margin-top: 20rpx;
}

.xihuan-line {
  height: auto;
  padding: 0;
  overflow: hidden;
  flex: 1;
  height: 0;
  border-top: 1px solid #eee;
}

.xihuan-text {
  padding: 0 32rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xihuan-text .txt {
  color: #111;
  font-size: 30rpx;
}

.xihuan-text .img {
  text-align: center;
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}

.prolist {
  width: 100%;
  height: auto;
  padding: 8rpx 20rpx;
}

.toptabbar_tab {
  display: flex;
  width: 100%;
  height: 90rpx;
  background: #fff;
  top: var(--window-top);
  z-index: 11;
  position: fixed;
  border-bottom: 1px solid #f3f3f3;
}

.toptabbar_tab .item {
  flex: 1;
  font-size: 28rpx;
  text-align: center;
  color: #666;
  height: 90rpx;
  line-height: 90rpx;
  overflow: hidden;
  position: relative;
}

.toptabbar_tab .item .after {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -16rpx;
  bottom: 10rpx;
  height: 3px;
  border-radius: 1.5px;
  width: 32rpx;
}

.toptabbar_tab .on {
  color: #323233;
}

.toptabbar_tab .on .after {
  display: block;
}

.scrolltop {
  position: fixed;
  bottom: 180rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 50%;
  padding: 12rpx 10rpx 8rpx 10rpx;
  z-index: 9;
}

.scrolltop .image {
  width: 100%;
  height: 100%;
}

.ggdiaplog_close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  bottom: -100rpx;
  left: 50%;
  margin-left: -25rpx;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 8rpx;
}

.schemeDialog {
  background: rgba(0, 0, 0, 0.4);
  z-index: 12;
}

.schemeDialog .main {
  position: absolute;
  top: 30%;
}

.schemecon {
  padding: 40rpx 30rpx;
}

.copybtn {
  text-align: center;
  margin-top: 30rpx;
  padding: 15rpx 20rpx;
  border-radius: 50rpx;
  color: #fff;
}

.member {
  position: relative;
  border-radius: 8rpx;
  border: 1rpx solid #fd4a46;
  overflow: hidden;
  box-sizing: content-box;
}

.member_lable {
  height: 100%;
  font-size: 22rpx;
  color: #fff;
  background: #fd4a46;
  padding: 0 15rpx;
}

.member_value {
  padding: 0 15rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #fd4a46;
}

.flex-s {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.moneyprice {
  font-size: 26rpx;
  font-weight: 400;
  padding: 4rpx 10rpx;
  min-width: 90rpx;
  text-align: center;
  margin-left: 10rpx;
  border-radius: 20rpx;
}

/*附近门店S*/
.nearby-mendian-box {
  margin: 20rpx 0;
  background: #ffffff;
  width: 100%;
  padding: 20rpx;
}

.nearby-mendian-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nearby-mendian-title .t1 {
  font-size: 30rpx;
  font-weight: bold;
}

.nearby-mendian-title .t2 {
  color: #999;
  font-size: 26rpx;
}

.nearby-mendian-title .t2 image {
  height: 26rpx;
  width: 26rpx;
  vertical-align: middle;
}

.nearby-mendian-info {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 20rpx;
}

.mendian-info .b1 {
  background-color: #fbfbfb;
}

.nearby-mendian-info .b1 image {
  height: 90rpx;
  width: 90rpx;
  border-radius: 6rpx;
  border: 1px solid #e8e8e8;
}

.nearby-mendian-info .b2 {
  flex: 1;
  line-height: 38rpx;
  margin-left: 10rpx;
  max-width: 70%;
  overflow: hidden;
}

.nearby-mendian-info .b2 .t1 {
  padding-bottom: 10rpx;
}

.nearby-mendian-info .b2 .t2 {
  font-size: 24rpx;
  color: #999;
}

.nearby-mendian-info .b3 {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding-left: 10rpx;
  width: 130rpx;
}

.nearby-mendian-info .b3 image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}

.nearby-mendian-info .nearby-tag {
  padding: 0 10rpx;
  margin-right: 10rpx;
  display: inline-block;
  font-size: 22rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.nearby-mendian-info .mendian-distance {
  flex-shrink: 0;
}

.nearby-mendian-info .mendian-address {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 80%;
  padding-left: 10rpx;
}

.pd10 {
  padding-left: 10rpx;
}

.isloding {
  text-align: center;
  color: gray;
  font-style: italic;
}

/*附近门店E*/
/* 标签 */
.pdetail-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.pdetail {
  display: inline-block;
  height: 50rpx;
  line-height: 50rpx;
  margin-bottom: 4px;
  border: 0;
  border-radius: 4rpx;
  padding: 0 20rpx;
  color: #666666;
  margin-right: 10rpx;
  font-size: 26rpx;
  background: #f4f4f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}

/* 销量 */
.f11 {
  height: 60rpx;

  font-size: 24rpx;
  color: #777777;
  position: absolute;
  right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f11-item {
  margin-right: 20rpx;
}

.scrolltop-box {
  position: fixed;
  bottom: 180rpx;
  right: 20rpx;
}

.scrolltop-box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #fff;
  border-radius: 50%;
  padding: 12rpx;
  z-index: 9;
  margin-top: 20rpx;
  position: relative;
}

.scrolltop-box-item image {
  width: 40rpx;
  height: 40rpx;
}

.scrolltop-box-item .cartnum {
  position: absolute;
  top: -10rpx;
  right: -14rpx;
  color: #fff;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  font-size: 22rpx;
}

.btn-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36rpx;
  background-color: #fff7e6;
  width: 160rpx;
  height: 78rpx;
}

.btn-item-img {
  width: 34rpx;
  height: 34rpx;
  margin-right: 4rpx;
}

.btn-item-text {
  font-size: 30rpx;
  font-weight: 700;
  color: #ac5300;
}

.pop {
  background-color: #fff;
}

.popup-box {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  position: relative;
}

.popup-title {
  padding: 40rpx 0;
  text-align: center;
  border-bottom: 1px solid #e3e3e3;
  font-weight: 600;
  color: #666;
}

.popup-content {
  padding: 52rpx;
}

.popup-fw {
  font-size: 38rpx;
  font-weight: 600;
}

.popup-text {
  color: #666;
  font-size: 24rpx;
  text-indent: 2em;
}

.mt-20 {
  margin-top: 20rpx;
}

.pop-btn {
  border-radius: 36rpx;
  color: #fff;
  margin: 0 20rpx;
}

.pop-flex {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.pop-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.buy-box {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx 3%;
}

.buy-box-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.buy-box-title-left {
  font-weight: 700;
}

.buy-box-title-right {
  display: flex;
  align-items: center;
}

.buy-box-title-right image {
  width: 38rpx;
  height: 38rpx;
}

.roll-box {
  margin-top: 10rpx;
}

.flex-box-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-left-box {
  display: flex;
  align-items: center;
}

.flex-box-img {
  width: 50rpx;
  height: 50rpx;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  margin-right: 10rpx;
}

.popup__title__jl {
  background-color: #f5f7f9;
}

.popup-jl {
  max-height: 60vh;
  /* overflow-y: auto; */
  -webkit-overflow-scrolling: touch;
  padding: 20rpx;
}

.popup-lq {
  max-height: 60vh;
  /* overflow-y: auto; */
  -webkit-overflow-scrolling: touch;
}

.popup-lq .card:last-child {
  margin-bottom: 100rpx;
}

.popup__modal {
  max-height: 80vh;
  /* 限制弹窗最大高度 */
  display: flex;
  flex-direction: column;
}

.service-item-jl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
}

.loading,
.no-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 24rpx;
}

.jl-text {
  width: 40%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.amazing-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.amazing-flex {
  display: flex;
  align-items: center;
}

.amazing-box {
  margin-top: 10rpx;
}

.amazing-text {
  font-weight: 700;
  font-size: 36rpx;
}

.amazing {
  display: flex;
  align-items: center;
}

.amazing-icon {
  width: 30rpx;
  height: 30rpx;
  margin-left: 6rpx;
}

.trend-box {
  border: 1px solid #eee;
  padding: 10rpx;
  display: flex;
  align-items: center;
  height: 50rpx;
  border-radius: 10rpx;
  background-color: #f9ffff;
}

.trend {
  width: 40rpx;
  height: 30rpx;
  margin-right: 6rpx;
}

.tip-box {
  position: absolute;
  top: -20rpx;
  left: 0;
  opacity: 0.9;
}

.tip-box::after {
  content: "";
  position: absolute;
  bottom: -10rpx;
  /* 调整三角形距离提示框的距离 */
  left: 20%;
  transform: translateX(-50%);
  /* 使三角形水平居中 */
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-top: 10rpx solid #595959;
  /* 三角形的颜色，和提示框背景颜色一致 */
}

.tip-content {
  background-color: #595959;
  padding: 10rpx;
  font-size: 24rpx;
  border-radius: 8rpx;
}

.amazing-main {
  display: flex;
  align-items: center;
}

.vertical-line {
  width: 1px;
  background-color: #ccc;
  margin: 0 20rpx;
  height: 50rpx;
}

.main-img {
  width: 60rpx;
  height: 60rpx;
  margin-right: 8rpx;
}

.tags-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 10rpx;
}

.tags-box-item {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
}

.card {
  display: flex;
  align-items: center;
  width: 100%;
  // padding: 10px 0;
  background: #fff;
  border-radius: 8px;
  -webkit-mask-image: radial-gradient(
      circle at 88px 4px,
      transparent 4px,
      red 4.5px
    ),
    radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
  // -webkit-mask-size: 100%, 2px 4px;
  -webkit-mask-repeat: repeat, repeat-y;
  -webkit-mask-position: 0 -8rpx, 170rpx;
  // -webkit-mask-composite: source-out;
  // mask-composite: subtract;
  position: relative;
  // background: linear-gradient(45deg, orange, red);
}

.card-left {
  width: 88px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}

.card-left-top {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-bottom-right-radius: 30rpx;
}

.card-right {
  padding: 16px 12px;
  display: flex;
  // flex: 1;
  flex-direction: column;
}

.card-info {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
}

.card-time {
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
  color: #fff;
  margin-top: 4px;
}

.card-right-text {
  display: flex;
  align-items: center;
  color: #fff;
}

.card-right-img {
  width: 30rpx;
  height: 30rpx;
}

.card-left-money {
  font-size: 24rpx;
}

.card-btn-item {
  width: 180rpx;
}

.card-btn {
  color: #fff;
  border-radius: 30rpx;
  padding: 10rpx 30rpx;
  font-size: 24rpx;
  text-align: center;
}

.product-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240rpx;
}

.card-btn-text {
  font-size: 24rpx;
  color: #fff;
  text-align: center;
}

.card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 0 20rpx 0 0;
}

.card-item::before {
  content: "";
  position: absolute;

  top: 0;
  bottom: 0;
  width: 2px;
  border-left: 1px dashed #fff;
}

.juli {
  width: 30rpx;
  height: 30rpx;
}

.juli-box {
  display: flex;
  align-items: center;
  width: 85%;
}

.address-box {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-item {
  display: flex;
  justify-content: space-between;

  gap: 10rpx;
  font-size: 24rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.coupon-item-l {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.coupon-item-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8rpx;
  padding: 4rpx;
}

.coupon-left {
  padding-right: 6rpx;
  position: relative;
}

.coupon-left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rpx;
  height: 80%;
  border-right: 2rpx dashed #ccc;
}

.coupon-right {
  padding-left: 6rpx;
}

.get_coupons {
  width: 80rpx;
  height: 100%;
}

.coupon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  // width: 130rpx;
  height: 40rpx;
  padding: 6rpx 8rpx;
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
  animation: pulse 1.5s infinite;
  flex-shrink: 0;
}

.arr-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30rpx;
  height: 30rpx;
  background-color: #fff;
  border-radius: 50%;
  font-size: 24rpx;
  margin-left: 6rpx;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.popup__title__coupon__right {
  display: flex;
  align-items: center;
}

.popup__title__coupon__right__btn {
  background-color: #f1f1f1;
  border-radius: 36rpx;
  font-size: 24rpx;
  padding: 0rpx 10rpx;
  margin-right: 20rpx;
}

.popup__title__coupon__text {
  font-size: 36rpx;
  font-weight: 700;
}

.popup__title__coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}

.popup__modal__content {
  padding: 20rpx;
}

.popup__modal__content .card {
  margin-bottom: 20rpx;
}

.popup__modal__content__text {
  text-align: center;
}

.price-calc-wrapper {
  position: relative;
  margin-bottom: 20rpx;
  padding-top: 20rpx;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-bottom: 20rpx solid #ffe7e7;
  }
}

.price-calc {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  border: 2rpx solid #ffe7e7;
  display: flex;
  align-items: center;
  justify-content: center;

  .final-price {
    background: #ff2c3c;
    color: #fff;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;

    .symbol {
      font-size: 24rpx;
    }

    .amount {
      font-size: 32rpx;
      font-weight: bold;
      margin: 0 4rpx;
    }

    .unit {
      font-size: 24rpx;
    }
  }

  .calc-formula {
    display: flex;
    align-items: center;
    margin-top: 16rpx;
    color: #333;
    font-size: 28rpx;

    .equal,
    .minus,
    .bracket,
    .divide {
      margin: 0 8rpx;
      color: #666;
    }

    .formula-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .value {
        color: #ff2c3c;
        font-weight: bold;
      }

      .label {
        font-size: 24rpx;
        color: #999;
        margin-top: 4rpx;
      }

      .label-t {
        color: #fff;
        border-radius: 30rpx;
        padding: 4rpx 6rpx;
      }
    }

    .number {
      color: #ff2c3c;
      font-weight: bold;
    }
  }

  .discount-tip {
    font-size: 24rpx;
    color: #ff2c3c;
    margin-top: 8rpx;
  }
}

.youhuibtn {
  flex: 1;
  border-radius: 0 36rpx 36rpx 0;
  text-align: center;
  color: #fff;
  background-color: #ff4224;
}

.youhuibtn-text-left {
  font-size: 24rpx;
  margin-top: 4rpx;
  margin-bottom: 4rpx;
}

.youhuibtn-text {
  font-size: 20rpx;
  letter-spacing: -2rpx;
}

.mid-box {
  background-color: #fff;
  padding-left: 100rpx;
  padding-bottom: 20rpx;
}

.mid-box-text {
  margin-left: 10rpx;
  font-size: 26rpx;
  color: #888;
}

.bottom-list {
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fafafa;
  padding: 4rpx 10rpx;
  margin-top: 10rpx;
  color: #666;
}

.bottom-list-left {
  display: flex;
  align-items: center;
}

.bottom-list-text {
  margin: 0 6rpx;
}

.bottom-list-icon {
  width: 30rpx;
  height: 30rpx;
}

.logo-img {
  border-radius: 50%;
}

.sc-img {
  width: 44rpx;
  height: 44rpx;
}

.sc-text {
  font-size: 18rpx;
  color: #222222;
}

.zz-icon {
  width: 35rpx;
  height: 35rpx;
  margin-right: 4rpx;
}

.pop_kefu {
  .load_kefu {
    background-color: #fff;
    width: 80vw;
    height: 20vh;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 100rpx;
    border-radius: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pop_kefulist {
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: 100rpx;
    border-radius: 60rpx;
    width: 80vw;

    .pop_list_item {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding: 20rpx;
      border-bottom: #e7e7e7 2rpx solid;

      .pic {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .name {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.waterfall-container {
  width: 100%;
  // height: 100vh;
  /* 可根据需要调整高度 */
  padding: 10rpx;
  box-sizing: border-box;
}

.like {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.like-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.waterfall-container-title {
  text-align: center;
  padding: 20rpx 0;
}

.waterfall-list {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
}

.waterfall-column {
  width: 48%;
  /* 两列布局，留一点间距 */
}

.waterfall-item {
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.shop-image {
  width: 100%;
  display: block;
}

.shop-text {
  padding: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-text-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-text-price {
  font-size: 32rpx;
  color: #ff4d4f;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shop-text-sales {
  font-size: 24rpx;
  color: #999;
}

.shop-add {
  width: 48rpx;
  height: 48rpx;
}

.loading-text,
.no-more-text {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 26rpx;
}

.liveWindows {
  width: 160rpx;
  height: 235rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.4);
  border: 1rpx solid rgba(187, 187, 187, 1);
  display: flex;
  align-items: center;
  padding: 10rpx;
  overflow: hidden;
  position: relative;

  .live-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .liveicon1 {
    z-index: 9;
    width: 50rpx;
    height: 50rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 50%;
    background: linear-gradient(
      to right,
      rgba(118, 94, 167, 1),
      rgba(128, 30, 124, 1)
    );

    image {
      width: 120%;
      height: 120%;
      border-radius: 50%;
    }
  }

  .close {
    position: absolute;
    top: -2rpx;
    right: -2rpx;
    width: 40rpx;
    height: 40rpx;
    // background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .live-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 35rpx;
    margin-top: 60rpx;

    .live-info {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      background: rgba(0, 0, 0, 0.5);
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      margin: 0 auto;

      .live-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }

      .live-title {
        color: #fff;
        font-size: 24rpx;
      }
    }

    .liveicon {
      width: 60rpx;
      height: 60rpx;
    }

    .live-btn {
      // position: absolute;
      bottom: 10rpx;
      background: #ff4d4f;
      color: #fff;
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      z-index: 1;
    }
  }
}
</style>
